Intodcution to Html

What is HTML
 HTML describes the contentcontent and formatformat of web pages
using tags.
Ex. Title Tag: <title>A title </title>
 It’s the job of the web browser to interpret tags and
display the content accordingly.

HTML Syntax
 An HTML file contains both formatting tagsformatting tags and
contentcontent
 Document content is what we see on the webpage.
 Tags are the HTML codes that control the appearance
of the document content.

HTML Syntax
 HTML syntax:
two-sided tag:
<tag attributes> document content </tag>
Starting
tag
Properties of the
tag.
Optional!
Actual content appears in
webpage. It could be empty
Closing
tag
Examples: <p> WAD Lecture </p>
<body bgcolor = “yellow”> UCF </body>

HTML Syntax
HTML syntax:
one-sided tag:
<tag />
e.g. Breaking line tag: <br/>
Horizontal line tag: <hr/>

Structure of the web page
 Starting with the tag <html>...</html>
<html>
<head> </head>
<body>
…………
<body>
</html>
Everything about
the web page
should be
enclosed here

 Inside the <html></html> tag
 Each web page has a headhead part described in
<head></head> tag:
<html>
<head>
<title> WAD Lecture</title>
</head>
<body> …. <body>
</html>
The title of the
web page
should be put
here

 Inside the <html></html> tag
 Each web page has a bodybody part described in <body></body> tag:
<html>
<head>
<title> WAD Lecture </title>
</head>
<body>
This is a sample HTML file.
</body>
</html>
The content of
the whole web
page should be
put here

Introduction to some common tags
Paragraph tag
Heading tags
Text formatting tags
Hyperlink tags
List tag

Paragraph tags <p>...</p>
<html>
<head>
<title> WAD Lecture</title>
</head>
<body>
<p> Here is the first paragraph. </p>
<p> Here is the second paragraph. </p>
</body>
</html>

HTML Headings
 HTML headings are defined with the <h1> to <h6>
tags.
 Example
<h1>Hello World</h1>
……..

Formatting HTML Tags
<html>
<body>
<p><b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<code>This is computer output</code>
This is<sub> subscript</sub>
and <sup>superscript</sup></p>
</body>
</html>

Formatting HTML Tags
 HTML uses tags like <b> and <i> for formatting output,
like bold or italic text.
 These HTML tags are called formatting tags.
 NOTE: Often <strong> renders as <b>, and <em> renders
as <i>.
 However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be
rendered in a way that the user understands as "important".
Today, all major browsers render strong as bold and em as
italics. However, if a browser one day wants to make a text
highlighted with the strong feature, it might be cursive for
example and not bold!

Hyperlink
 The HTML <a> tag defines a hyperlink.
 A hyperlink (or link) is a word, group of words, or image
that you can click on to jump to another document.
 When you move the cursor over a link in a Web page,
the arrow will turn into a little hand.
 The most important attribute of the <a> element is the
href attribute, which indicates the link's destination.
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

Hyperlink
 Link to another location or file
 Syntax:
<a href= “http://www.yahoo.com”> Link to yahoo </a>
StartingStarting
TagTag
Attribute of the tag: the address ofAttribute of the tag: the address of
the hyperlinkthe hyperlink
Content displayed on theContent displayed on the
pagepage
Ending tagEnding tag

Link
 Link to web site
<a href= “http://www.yahoo.com”> Link to Yahoo </a>
 Link to document
<a href=“http://www.biteducampus.in/img/building.jpg”>Link
</a>
 Email link
<a href= “mailto:name@domain.com”> Link to email
</a>

List tags
Ordered list: used to display information in a numeric order.
The syntax for creating an ordered list is:
<ol > e.g. <ol >
<li>item1 </li> <li> Name: Your name </li>
<li>item2 </li> <li> Section: ### </li>
… <li> Instructor: Yuping </li>
</ol> </ol>
 Result:

List tags
Unordered list: list items are not listed in a
particular order. The syntax is:
<ul > e.g. <ul>
<li>item1 </li> <li> Name: Amit Parmar </li>
<li>item2 </li> <li> Lecture: Web Application devlopment </li>
… <li> Instructor: Amit Parmar </li>
</ul> </ul>
Result :

List tags
 Description list is used to describe various terms.
 The <dl> tag is supported in all major browsers.
 Definition and Usage
 The <dl> tag defines a description list.
 The <dl> tag is used in conjunction with <dt> (defines
terms/names) and <dd> (describes each term/name).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Include a Picture : <img> Tag
 The <img> tag is empty, which means that it contains
attributes only, and has no closing tag.
 To display an image on a page, you need to use the src
attribute. Src stands for "source". The value of the src
attribute is the URL of the image you want to display.
<img src=“FILENAME” />
<img src=“FILENAME” alt=“text” />
E.g.
<img src=“logo.gif” alt=“Google logo” />
<img src=“logo.gif” />

HTML Tables: <table> tag
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). td stands
for "table data," and holds the content of a data cell. A
<td> tag can contain text, links, images, lists, forms, other
tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

HTML Tables: <table> tag
 Header information in a table are defined with the <th>
tag.
 All major browsers display the text in the <th> element as
bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

<span> Tag
 The <span> tag is used to group inline-elements in a
document.
 The <span> tag provides no visual change by itself.
 The <span> tag provides a way to add a hook to a part of a
text or a part of a document.
 When a text is hooked in a <span> element, you can style
it with CSS, or manipulate it with JavaScript.
<p>My mother has
<span style="color:blue;font-weight:bold">blue</span>
eyes and my father has
<span style="color:darkolivegreen;font-weight:bold">dark
green</span>
eyes.</p>

HTML Layouts
 Most websites have put their content in multiple
columns (formatted like a magazine or newspaper).
 Multiple columns are created by using <div> or <table>
elements. CSS are used to position elements, or to
create backgrounds or colorful look for the pages.
 Even though it is possible to create nice layouts with HTML
tables, tables were designed for presenting tabular data -
NOT as a layout tool!
 Better option is the div element. <div> .. </div>
 The div element is a block level element used for grouping
HTML elements.

HTML Forms: <form> tag
 HTML forms are used to pass data to a server.
 An HTML form can contain input elements like text
fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists, textarea,
fieldset, legend, and label elements.
 The <form> tag is used to create an HTML form:
<form>
...
input elements
…
</form>


HTML Forms - The Input Element
 The <input> element is used to select user information.
 Text Fields:
 <input type="text"> defines a one-line input field that a user
can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
 The form itself is not visible. Also note that the default
width of a text field is 20 characters.

 Password Field
 <input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
 The characters in a password field are masked (shown as
asterisks or circles).

 Radio Buttons
 <input type="radio"> defines a radio button. Radio
buttons let a user select ONLY ONE of a limited number
of choices:
<form>
<input type="radio" name="sex“
value="male">Male<br>
<input type="radio" name="sex"
value="female">Female
</form>
 How the HTML code above looks in a browser:
o Male
o Female

 Checkboxes
 <input type="checkbox"> defines a checkbox. Checkboxes let a
user select ZERO or MORE options of a limited number of
choices.
<form>
<input type="checkbox" name="vehicle“
value="Bike"> I have a bike<br/>
<input type="checkbox" name="vehicle"
value="Car"> I have a car
</form>
 How the HTML code above looks in a browser:
I have a bike
I have a car

<fieldset> Tag
 The <fieldset> tag is used to group related elements in a
form.
<form>
<fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
</fieldset>
</form>

HTML ( HyperText Markup Language)
 What is HTML5?
 HTML5 will be the new standard for HTML.
 The previous version of HTML, HTML 4.01, came in
1999. The internet has changed significantly since then.
 HTML5 is intended to subsume not only HTML 4, but also
XHTML 1 and DOM Level 2 HTML.
 HTML5 is also cross-platform (it does not care whether
you are using a tablet or a smartphone, a netbook,
notebook or a Smart TV).

Some rules for HTML5
 New features should be based on HTML, CSS, DOM, and
JavaScript
 The need for external plugins (like Flash) needs to be
reduced
 Error handling should be easier than in previous versions
 Scripting has to be replaced by more markup
 HTML5 should be device-independent
 The development process should be visible to the public

Intodcution to Html

More Related Content

What's hot

Similar to Intodcution to Html

More from Taha Malampatti

Recently uploaded

Intodcution to Html