HTML Notes

1
Introduction to HTML What is HTML? HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
HTML Tags HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html HTML tags normally come in pairs like <b and <!b The first tag in a pair is the start tag, the second tag is the end tag "tart and end tags are also called opening tags and closing tags.
HTML Documents - Web Pages

HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
The purpose of a web browsers #like $nternet %xplorer& is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page' <html> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html> E ample E plained
The text between <html
and <!html
describes the web page
The text between <body and <!body is the (isible page content The text between <h) and <!h) is displayed as a heading The text between <p and <!p is displayed as a paragraph
Editing HTML *e use a plain text editor #like +otepad& to edit HTML. *e belie(e this is the best way to learn HTML. Howe(er, professional web de(elopers often prefer HTML editors like ,ront-age or .reamwea(er, instead of writing plain text.
HTM or HTML E tension? *hen you sa(e an HTML file, you can use either the .htm or the .html extension. *e use .htm in our examples. $t is a habit from the past, when the software only allowed three letters in file extensions. *ith new software it is perfectly safe to use .html. How to !iew HTML "ource To find out, click the /$%* option in your browser0s toolbar and select "1234% or -A5% "1234%. This will open a window that shows you the HTML code of the page. HTML Headings HTML headings are defined with the <h) Headings #re $mportant 2se the HTML heading tags for headings only. .on0t use headings to make something %$& or bold. "earch engines use your headings to index the structure and content of your web pages. "ince users may skim your pages by its headings, it is important to use headings to show the document structure. to <h6 tags.
H) headings should be used as main headings, followed by H7 headings, and less important H8 headings, and so on. <html <body <h) This <h7 This <h8 This <h9 This <h: This <h6 This <!body <!html
is is is is is is
heading heading heading heading heading heading
)<!h) 7<!h7 8<!h8 9<!h9 :<!h: 6<!h6
HTML Paragraphs HTML paragraphs are defined with the <p tag.
<html <body <p This is a paragraph.<!p <p This is a paragraph.<!p <p This is a paragraph.<!p <p -aragraph elements are defined by the p tag.<!p <!body <!html 'ote( ;rowsers automatically adds an empty line before and after paragraphs. Don)t *orget the End Tag Most browsers will display HTML correctly e(en if you forget the end tag' <p>This is a paragraph <p>This is another paragraph The example abo(e will work in most browsers, but don0t rely on it. ,orgetting the end tag can produce unexpected results or errors. 'ote( ,uture (ersion of HTML will not allow you to skip end tags.
HTML Line %reaks 2se the <br ! tag if you want a line break #a new line& without starting a new paragraph' <html <body <p This is <br ! <!body <!html The <br !
a para <br !
graph with line breaks<!p
tag is an empty tag. $t has no end tag like <!br .
+br, or +br -, $n <HTML, <ML, and future (ersions of HTML, tags with no end tags #closing tags& are not allowed. %(en if <br works in all browsers, writing <br ! .uture proo.. HTML Fonts The HTML +.ont, Tag *ith HTML code like this, you can specify both the si=e and the type of the browser output ' <p> <font size="2" face=" erdana"> This is a paragraph! </font> </p> <p> <font size=""" face="Times"> This is another paragraph! </font> </p> HTML /ules 0Lines1 The <hr ! tag is used to create an hori=ontal rule #line&. instead is more
%xample' <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> HTML 2utput - 3se.ul Tips *ith HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remo(e extra spaces and extra lines when the page is displayed. Any numbers of lines count as one space, and any number of spaces count as one space. HTML 4omments 4omments can be inserted in the HTML code to make it more readable and understandable. 4omments are ignored by the browser and not displayed. 4omments are written like this' <html <body <>??This comment will not be displayed?? <p This is a regular paragraph<!p <!body <!html 'ote( There is an exclamation point after the opening bracket, but not before the closing bracket. HTML Te t *ormatting HTML *ormatting Tags HTML uses tags like <b italic text. and <i for formatting output, like bold or
These HTML tags are called formatting tags.
The following example demonstrates how you can format text in an HTML document. <html <body <p <b This text is bold<!b <!p <p <strong This text is strong<!strong <!p <p <big This text is big<!big <!p <p <em This text is emphasi=ed<!em <!p <p <i This text is italic<!i <!p <p <small This text is small<!small <!p <p This is<sub subscript<!sub <sup superscript<!sup <!p <!body <!html Pre.ormatted te t The following example demonstrates how you can control the line breaks and spaces with the pre tag. <html <body +pre, This is preformatted text. $t preser(es and line breaks. +-pre, <p The pre tag is good for displaying computer code'<!p +pre, for i @ ) to )A print i next i both spaces and
+-pre, <!body <!html <html <body #ddress This example demonstrates how to write an address in an HTML document. <address .onald .uck<br ;1< :::<br .isneyland<br 2"A <!address <!body <!html Tag <b <i <u <sub <sup <pre <address Description .efines bold text .efines italic text .efines underline text .efines subscripted text .efines superscripted text .efines preformatted text .efines an address element
HTML Elements An HTML element is e(erything from the start tag to the end tag' "tart tag <p %lement content This is a paragraph %nd tag <!p
<a href@Bdefault.htmB HTML Element "5nta

This is a link
<!a
An HTML element starts with a start tag An HTML element ends with an end tag The element content is e(erything between the start and end tag "ome HTML elements ha(e empt5 content "ome HTML elements ha(e a missing end tag
'ote( The start tag can ha(e additional information #attributes&. Empt5 HTML Elements HTML elements without content are called empty elements. %mpty elements ha(e no end tag. <br ! is an empty element without a closing tag.
HTML #ttributes

HTML elements can ha(e attributes Attributes pro(ide additional information about the element Attributes are always specified in the start tag
#ttributes E ample <body defines the body of an HTML document.
<body bgcolor@ByellowB The bgcolor attribute defines the background color for the <body element. 'ote( bgcolor is a BdyingB attribute HTML Links HTML links are defined with the <a <html <body tag.
<a href@Bhttp'!!www.w8schools.comB This is a link<!a <!body <!html H5perlinks, #nchors, and Links $n web terms, a hyperlink is a reference #an address& to a resource on the web. Hyperlinks can point to any resource on the web' an HTML page, an image, a sound file, a mo(ie, etc. An anchor is a term used to define a hyperlink destination inside a document. The HTML anchor element +a,, is used to de.ine both h5perlinks and anchors6 *e will use the term HTML link when the <a element points to a resource, and the term HTML anchor when the <a elements defines an address inside a document.. #n HTML Link Link syntax' <a href="#rl">$in% te&t</a> The start tag contains attributes about the link. The element content #Link text& defines the part to be displayed. 'ote( The element content don0t ha(e to be a text. Cou can link from an image or any other HTML element. The hre. #ttribute The hre. attribute defines the link BaddressB. This <a element defines a link to *8"chools'
10
<a href="http'//(((!("schools!com/"> isit )"*chools+</a> The target #ttribute The target attribute defines where the linked document will be opened. The code below will open the document in a new browser window' <a href="http'//(((!("schools!com/" target=",blan%"> isit )"*chools+</a> The name #ttribute *hen the name attribute is used, the <a element defines a named anchor inside a HTML document. +amed anchor are not displayed in any special way. They are in(isible to the reader. +amed anchor syntax' <a name@BlabelB Any content<!a The link syntax to a named anchor' <a href@BDlabelB Any content<!a The D in the href attribute defines a link to a named anchor. E ample( A named anchor inside an HTML document' <a name@BtipsB 2seful Tips "ection<!a A link to the 2seful Tips "ection from the same document' <a href@BDtipsB Eump to the 2seful Tips "ection<!a A link to the 2seful Tips "ection from another document' <a href@Bhttp'!!www.w8schools.com!htmlFtutorial.htmDtipsB Eump to the 2seful Tips "ection<!a
11
More E amples #n image as a link following example demonstrates how to use an image as a link. <html <body <p Cou can also use an image as a link' <a href@Blastpage.htmB <img border@BAB src@Bbuttonnext.gifB width@B6:B height@B8GB <!a <!p <!body <!html Link to a location on the same page following example demonstrates how to use a link to Hump to another part of a document. <html <body <p <a href@BD49B "ee also 4hapter 9.<!a <!p <h7 4hapter )<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter 7<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter 8<!h7 <p This chapter explains ba bla bla<!p <h7 <a name@B49B 4hapter 9<!a <!h7 <p This chapter explains ba bla bla<!p <h7 4hapter :<!h7 <p This chapter explains ba bla bla<!p
12
<h7 4hapter 6<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter I<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter G<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter J<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter )A<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter ))<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter )7<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter )8<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter )9<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter ):<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter )6<!h7 <p This chapter explains ba bla bla<!p <h7 4hapter )I<!h7 <p This chapter explains ba bla bla<!p <!body <!html
13
%reak out o. a .rame following example demonstrates how to break out of a frame, if your site is locked in a frame. <html <body <p Locked in a frameK<!p <a href@Bhttp'!!www.w8schools.com!B target@BFtopB 4lick here><!a <!body <!html 4reate a mailto link following example demonstrates how to link to a mail message #will only work if you ha(e mail installed&. <html <body <p This is a mail link' <a href@Bmailto'someoneLmicrosoft.comKsubHect@HelloM7AagainB "end Mail<!a <!p <p <b +ote'<!b "paces between words should be replaced by M7A to <b ensure<!b that the browser will display your text properly. <!p <!body <!html HTML $mages HTML images are defined with the <img The $mage Tag and the "rc #ttribute tag.
14
$n HTML, images are defined with the <img
tag.
The <img tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. "rc stands for BsourceB. The (alue of the src attribute is the 23L of the image you want to display on your page. The syntax of defining an image' <img src="#rl">
The #lt #ttribute The alt attribute is used to define an Balternate textB for an image. The (alue of the alt attribute is an author?defined text' <img src="boat!gif" alt="-ig -oat"> The BaltB attribute tells the reader what he or she is missing on a page if the browser can0t load images. The browser will then display the alternate text instead of the image. <html <body <img src@Bconstr9.gifB width@B)99B height@B:AB ! <!body <!html HTML Tables Tables Tables are defined with the <table tag. A table is di(ided into rows #with the <tr tag&, and each row is di(ided into data cells #with the <td tag&. The letters td stands for Btable data,B which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, hori=ontal rules, tables, etc.
15
<table border="1"> <tr> <td>ro( 1. cell 1</td> <td>ro( 1. cell 2</td> </tr> <tr> <td>ro( 2. cell 1</td> <td>ro( 2. cell 2</td> </tr> </table> How it looks in a browser' row ), cell ) row ), cell 7 row 7, cell ) row 7, cell 7 Tables and the %order #ttribute $f you do not specify a border attribute the table will be displayed without any borders. "ometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will ha(e to use the border attribute' <table border="1"> <tr> <td>/o( 1. cell 1</td> <td>/o( 1. cell 2</td> </tr> </table> Headings in a Table Headings in a table are defined with the <th <table border="1"> <tr> <th>Heading</th> <th>0nother Heading</th> </tr> <tr> <td>ro( 1. cell 1</td> tag.
16
<td>ro( 1. cell 2</td> </tr> <tr> <td>ro( 2. cell 1</td> <td>ro( 2. cell 2</td> </tr> </table> How it looks in a browser' Heading #nother Heading
row ), cell ) row ), cell 7 row 7, cell ) row 7, cell 7 Empt5 4ells in a Table Table cells with no content are not displayed (ery well in most browsers. <table border="1"> <tr> <td>ro( 1. cell 1</td> <td>ro( 1. cell 2</td> </tr> <tr> <td>ro( 2. cell 1</td> <td></td> </tr> </table> How it looks in a browser' row ), cell ) row ), cell 7 row 7, cell ) +ote that the borders around the empty table cell are missing #+;> Mo=illa ,irefox displays the border&. To a(oid this, add a non?breaking space #NnbspO& to empty data cells, to make the borders (isible'
17
<table border="1"> <tr> <td>ro( 1. cell 1</td> <td>ro( 1. cell 2</td> </tr> <tr> <td>ro( 2. cell 1</td> <td>1nbsp2</td> </tr> </table> How it looks in a browser' row ), cell ) row ), cell 7 row 7, cell ) HTML Lists 3nordered Lists An unordered list is a list of items. The list items are marked with bullets #typically small black circles&. An unordered list starts with the <ul the <li tag. <#l> <li>3offee</li> <li>Mil%</li> </#l> Here is how it looks in a browser'

tag. %ach list item starts with
4offee Milk
$nside a list item you can put paragraphs, line breaks, images, links, other lists, etc. 2rdered Lists An ordered list is also a list of items. The list items are marked with numbers.
18
An ordered list starts with the <ol <li tag. <ol> <li>3offee</li> <li>Mil%</li> </ol> Here is how it looks in a browser' ). 4offee 7. Milk
tag. %ach list item starts with the
$nside a list item you can put paragraphs, line breaks, images, links, other lists, etc. De.inition Lists A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl tag. %ach definition?list term starts with the <dt tag. %ach definition?list definition starts with the <dd tag. <dl> <dt>3offee</dt> <dd>-lac% hot drin%</dd> <dt>Mil%</dt> <dd>)hite cold drin%</dd> </dl> Here is how it looks in a browser' 4offee ;lack hot drink Milk *hite cold drink $nside a definition?list definition #the <dd tag& you can put paragraphs, line breaks, images, links, other lists, etc. HTML Forms and Input
19
*orms A form is an area that can contain form elements. ,orm elements are elements that allow the user to enter information #like text fields, textarea fields, drop?down menus, radio buttons, checkboxes, etc.& in a form. A form is defined with the <form <form> <inp#t> <inp#t> </form> $nput The most used form tag is the <input tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. <form> First name' <inp#t type="te&t" name="firstname"> <br> $ast name' <inp#t type="te&t" name="lastname"> </form> How it looks in a browser' ,irst name' Last name' +ote that the form itself is not (isible. Also note that in most browsers, the width of the text field is 7A characters by default. tag.
20
Radio Buttons 3adio ;uttons are used when you want the user to select one of a limited number of choices. <form> <inp#t type="radio" name="se&" 4al#e="male"> Male <br> <inp#t type="radio" name="se&" 4al#e="female"> Female </form> How it looks in a browser' Male ,emale +ote that only one option can be chosen. Checkboxes 4heckboxes are used when you want the user to select one or more options of a limited number of choices. <form> 5 ha4e a bi%e' <inp#t type="chec%bo&" name="4ehicle" 4al#e="-i%e"> <br> 5 ha4e a car' <inp#t type="chec%bo&" name="4ehicle" 4al#e="3ar"> <br> 5 ha4e an airplane' <inp#t type="chec%bo&" name="4ehicle" 4al#e="0irplane"> </form> How it looks in a browser' $ ha(e a bike' $ ha(e a car' $ ha(e an airplane' The *orm)s #ction #ttribute and the "ubmit %utton
21
*hen the user clicks on the B"ubmitB button, the content of the form is sent to the ser(er. The form0s action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the recei(ed input. <form name="inp#t" action="html,form,s#bmit!asp" method="get"> 6sername' <inp#t type="te&t" name="#ser"> <inp#t type="s#bmit" 4al#e="*#bmit"> </form> How it looks in a browser' 2sername'
Submit
$f you type some characters in the text field abo(e, and click the B"ubmitB button, the browser will send your input to a page called BhtmlFformFsubmit.aspB. The page will show you the recei(ed input.
HTML Frames *rames *ith frames, you can display more than one HTML document in the same browser window. %ach HTML document is called a frame, and each frame is independent of the others. The disad(antages of using frames are'

The web de(eloper must keep track of more HTML documents $t is difficult to print the entire page
The *rameset Tag

The <frameset tag defines how to di(ide the window into frames %ach frameset defines a set of rows or columns The (alues of the rows!columns indicate the amount of screen area each row!column will occupy
The *rame Tag
22
The <frame frame
tag defines what HTML document to put into each
$n the example below we ha(e a frameset with two columns. The first column is set to 7:M of the width of the browser window. The second column is set to I:M of the width of the browser window. The HTML document BframeFa.htmB is put into the first column, and the HTML document BframeFb.htmB is put into the second column' <frameset cols="278.978"> <frame src="frame,a!htm"> <frame src="frame,b!htm"> </frameset> 'ote( The frameset column si=e (alue can also be set in pixels #cols@B7AA,:AAB&, and one of the columns can be set to use the remaining space #cols@B7:M,PB&. %asic 'otes - 3se.ul Tips $f a frame has (isible borders, the user can resi=e it by dragging the border. To pre(ent a user from doing this, you can add noresi=e@Bnoresi=eB to the <frame tag. Add the <noframes tag for browsers that do not support frames.
$mportant( Cou cannot use the <body <!body tags together with the <frameset <!frameset tags> Howe(er, if you add a <noframes tag containing some text for browsers that do not support frames, you will ha(e to enclose the text in <body <!body tags>

HTML Notes

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Notes

Caricato da

Copyright:

Formati disponibili

1

HTML Documents - Web Pages

The text between <html

describes the web page

heading heading heading heading heading heading

)<!h) 7<!h7 8<!h8 9<!h9 :<!h: 6<!h6

graph with line breaks<!p

tag is an empty tag. $t has no end tag like <!br .

These HTML tags are called formatting tags.

<a href@Bdefault.htmB HTML Element "5nta

#ttributes E ample <body defines the body of an HTML document.

$n HTML, images are defined with the <img

tag. %ach list item starts with

tag. %ach list item starts with the

The *rameset Tag

The *rame Tag

The <frame frame

tag defines what HTML document to put into each

Potrebbero piacerti anche