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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Intodcution to Html

Similaire à Intodcution to Html (20)

Plus de Taha Malampatti

Plus de Taha Malampatti (17)

Dernier

Dernier (20)

Intodcution to Html