3_htmlbasics_COMP3322B_s2019.pdf - COMP 3322B Modern Technologies on World Wide Web 2nd semester 2018-2019 HTML Basics(O2 Dr C Wu Department of Computer

3_htmlbasics_COMP3322B_s2019.pdf - COMP 3322B Modern...

This preview shows page 1 out of 22 pages.

You've reached the end of your free preview.

Want to read all 22 pages?

Unformatted text preview: COMP 3322B Modern Technologies on World Wide Web 2nd semester 2018-2019 HTML Basics (O2) Dr. C Wu Department of Computer Science The University of Hong Kong HTML HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information in a web browser a markup language is a set of markup tags An HTML document consists of text surrounded by html tags html tags tell a web browser how to display the content UTF-8 is the default encoding for HTML5 pages HTML files are saved with a .html or .htm extension HTML 4.01 published as a W3C (World Wide Web Consortium) recommendation in Dec. 1999; HTML5 published as a W3C recommendation in Oct. 2014 HTML tags HTML tags are enclosed within < and >, so a browser knows anything within <> needs to be interpreted as an instruction Most HTML tags are paired: a tag indicates the beginning of a command and another tag, with a forward slash ( / ) inside it, indicates where the command ends. e.g. HTML documents begin with <html> and finish with </html> Overlapping tag pairs should be avoided, as this may cause problems in some browsers: e.g., <tag1><tag2> …. </tag1></tag2> Some tags are not paired e.g. the break tag <br> which indicates a newline Basic structure and tags Document type declaration <!DOCTYPE html> The <!DOCTYPE> declaration is the very first thing in your HTML document, before the <html> tag. <!DOCTYPE> is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Basic structure and tags Head and body tags, metadata <!DOCTYPE html> <html> <head> <meta Charset=“UTF-8”> <meta name="descripAon" content=“Course site"> <meta name="keywords" content="HTML,CSS,JavaScript"> <Atle>COMP3322 Modern Technologies on World Wide Web </Atle> </head> <body> ..... </body> </html> The <head> tag defines information of the document; the <body> tag defines the document body The <meta> tag, located in the <head></head> area, provides metadata about the HTML document Metadata will not be displayed on the page, but are typically used to specify the character set used in the web page, page description, author of the document, and others. (Refer to “ ” for detailed explanations) Basic structure and tags HTML Comment <!-- xxxxx --> text inside <!-- and --> are HTML comment and will not be displayed by the browser. Headings <h1> <h2> <h3> <h4> <h5> <h6> d.%Headings%<H1>%<H2>%<H3>%<H4>%<H5>%<H6>%(Line%10^15)% HTML%Code% Display%result% <H1>This"is"heading"h1</H1>" <H2>This"is"heading"h2</H2>" <H3>This"is"heading"h3</H3>" <H4>This"is"heading"h4</H4>" <H5>This"is"heading"h5</H5>" <H6>This"is"heading"h6</H6>" " There"are"6"heading"levels"in"html"with"1"being"the"largest"so"that"the"most" there are 6 heading levels with 1 being the largest important"heading"should"use"a"<H1>"tag." e.%Paragraph%<P>%and%line%break%<BR>%(or%<BR%/>)(Line%18)% <H6>This"is"heading"h6</H6>" Basic structure and tags " There"are"6"heading"levels"in"html"with"1"being"the"largest"so"that"the"most" important"heading"should"use"a"<H1>"tag." Paragraph <p> and line break <br> e.%Paragraph%<P>%and%line%break%<BR>%(or%<BR%/>)(Line%18)% HTML%Code% Display%result% This is the first paragraph content. <P>This"is"the"first"paragraph" This line after line break." content.<BR>"The"line"after"line" break.</P>" The"Paragraph"tag"<P>"</P>"will"create"a"new"paragraph"and"will"usually"create"a" little"blank"space"before"and"after"the"paragraph."The"break"tag"<BR>"inserts"a"line"break" in"a"paragraph"without"beginning"a"new"paragraph"and"doesn’t"require"a"closing"tag." The paragraph tags <p> </p> create a new paragraph and usually create a little blank f.%Hyperlink%<A>%(Line%21)% space before and after the paragraph. HTML%Code" <A"HREF=" ; C0322</A>" The break tag <br> inserts a line break in a paragraph without beginning a Display% This"is"a"hyperlink"to"C0322" new paragraph. result" Please"note"that"we"can"also"include"image"within"the"<a>"</a>"pair,"making"an" image"as"a"clickable"link"to"another"location." g.%Image%<IMAGE>%(Line%25^27)% HTML%Code% <A"HREF="…">" " Display%result% " " This is the first paragraph content. <P>This"is"the"first"paragraph" This line after line break." content.<BR>"The"line"after"line" break.</P>" The"Paragraph"tag"<P>"</P>"will"create"a"new"paragraph"and"will"usually"create"a" little"blank"space"before"and"after"the"paragraph."The"break"tag"<BR>"inserts"a"line"break" in"a"paragraph"without"beginning"a"new"paragraph"and"doesn’t"require"a"closing"tag." Basic structure and tags Hyperlink <a> f.%Hyperlink%<A>%(Line%21)% HTML%Code" <A"HREF=" ; C0322</A>" Display% result" This"is"a"hyperlink"to"C0322" Please"note"that"we"can"also"include"image"within"the"<a>"</a>"pair,"making"an" image"as"a"clickable"link"to"another"location." Except text, we can also include image within <a> </a>, making the g.%Image%<IMAGE>%(Line%25^27)% image a clickable link to another location HTML%Code% <A"HREF="…">" " <IMG"SRC="example1.jpg""BORDER="0">" " </A>" Display%result% " " " " " " " " Important:"By"default,"putting"an"image"inside"a"link"puts"a"border"around"the" image."However,"most"people"browsing"the"web"these"days"recognize""link"situations"" and"know"that"the"button"is"a"link."So"you"may"want"to"use%BORDER="0""to"remove"the" border." 3" Basic structure and tags Hyperlink <a> links to an anchor (an element with a specific ID) in the HTML document HTML Code (index.html) Display result (when accessing http:// ) Display result (when clicking the hyperlink or accessing index.html#myanchor) <a href="#myanchor">Go to paragraph 6.</a> <p>This is the 1st long paragraph.</p> <p>This is the 2nd long paragraph.</p> <p>This is the 3rd long paragraph.</p> <p>This is the 4th long paragraph.</p> <p>This is the 5th long paragraph.</p> <p id="myanchor"> This is the 6th long paragraph.</p> <p>This is the 7th long paragraph.</p> <p>This is the 8th long paragraph.</p> <p>This is the 9th long paragraph.</p> <p>This is the 10th long paragraph.</p> Basic structure and tags Image <img> <img src="example.jpg" alt="example picture" width="136" height="166"> Refer to “ ” for complete list of attributes Unordered h.%Unordered%list%<UL>%(Line%31^37)% list <ul> h.%Unordered%list%<UL>%(Line%31^37)% HTML%Code% <UL>% HTML%Code% " <LI>Application"Layer</LI>% <UL>% % <LI>Transport"Layer</LI>% " <LI>Application"Layer</LI>% % <LI>Network"Layer</LI>% % <LI>Transport"Layer</LI>% <LI>Link"Layer</LI>" % % <LI>Network"Layer</LI>% <LI>Physical"Layer</LI>" % % <LI>Link"Layer</LI>" % % </UL><LI>Physical"Layer</LI>" </UL>% k.%Ordered%list%(Line%41^47)% k.%Ordered%list%(Line%41^47) % % Ordered list <ol> Display%result% • • • • • Physical"Layer" % HTML%Code% HTML%Code% <OL>% <OL>% " <LI>Application"Layer</LI>% " <LI>Application"Layer</LI>% % <LI>Transport"Layer</LI>% % <LI>Transport"Layer</LI>% <LI>Network"Layer</LI>% % % <LI>Network"Layer</LI>% <LI>Link"Layer</LI>% % % <LI>Link"Layer</LI>% <LI>Physical"Layer</LI>% % % <LI>Physical"Layer</LI>% </OL> </OL> %% Display%result% • Application"Layer" • Transport"Layer" Application"Layer" • Network"Layer" Transport"Layer" • Link"Layer" Network"Layer" • Physical"Layer" Link"Layer" Display%result% Display%result% 1. 2. 3. 4. 5. 1. Application"Layer" Application"Layer" 2. Transport"Layer" Transport"Layer" 3. Network"Layer" Network"Layer" 4. Link"Layer" Link"Layer" 5. Physical"Layer" Physical"Layer" Basic structure and tags Table <table> <table> .... </table> Table row tag <tr> one row of the table is defined within a pair of <tr> </tr> Basic structure and tags Table data tag <td> within each row, a cell is specified within a pair of <td> </td> example attributes in <td> tag: Attribute Value Description colspan a number the number of columns a cell should span rowspan a number the number of rows a cell should span Table header cell tag <th> within a pair of <th> </th>, data are bold and centered by default example attributes in <th> tag: Attribute Value Description colspan a number the number of columns a cell should span rowspan a number the number of rows a cell should span HTML%Code% <TABLE"WIDTH"="100%""BORDER="1">" <TR>" <TH>Header"1</TH>" <TH>Header"2</TH>" </TR>" <TR>" <TD>row"2,"col"1</TD>" <TD>row"2,"col"2</TD>" </TR>" <TR>" <TD>row"3,"col"1</TD>" <TD>row"3,"col"2</TD>" </TR>" </TABLE>" <%TABLE"WIDTH"="100%""BORDER"="1">" <TR>" <TD"ROWSPAN="2">row"1+2,"col"1</TD>" <TD>row"1,"col"2</TD>" </TR>" <TR>" <TD>row"2,"col"2</TD>" </TR>" </TABLE>" <%TABLE"WIDTH="100%""BORDER"="1">" <TR>" " <TD"COLSPAN="2">row"1,"col"1+2</TD>" """""""</TR>" <TR>" " <TD>row"2,"col"1</TD>" " <TD>row"2,"col"2</TD>" """""""</TR>" </TABL>" Display%result% Header%1% row"2,"col"1" row"3,"col"1" Header%2% row"2,"col"2" row"3,"col"2" row"1+2,"col"1" row"1,"col"2" row"2,"col"2" " " row"1,"col"1+2% row"2,"col"1" " Illustration"of"<TABLE>,"<TH>,"<TR>"and"<TD>" row"2,"col"2" Basic structure and tags Block-level element <div> a container for other HTML elements; often used to group elements for styling purposes <div style="background-color:black; color:white;"> <h2>Hong Kong</h2> <p>Vibrant and densely populated, Hong Kong is a major port and global financial center famed for its tower-studded skyline. It’s also known for its lively food scene – from Cantonese dim sum to extravagant high tea – and its shopping.</p> </div> Inline element <span> often used as a container for some text, marked for styling purposes <h1>My <span style="color:red">Favorite</span> Songs</h1> Basic structure and tags Form tag <form> used to collect user input and send to the server for server-side processing example attributes in <form> tag: Attribute Value Description action a URL where to send the form data when form submitted method get or post HTTP method to use when sending form data name some text the name of the form example: <form name="exampleform" acAon="handleform.php" method=“post”> … </form> <FORM%NAME="Example2""ACTION="anywebsite.html""METHOD="POST">" <FORM%NAME="Example2""ACTION="anywebsite.html""METHOD="POST">" In"the"above"example,"the"form"is"named%“Example2”,"and"when"the"user"click" Basic structure and tags In"the"above"example,"the"form"is"named%“Example2”,"and"when"the"user"click" the"submit"button,"the"data"that"the"user"filled"in"the"form"will"be"sent"to" the"submit"button,"the"data"that"the"user"filled"in"the"form"will"be"sent"to" “anywebsite.html”"(under"the"same"folder"that"the"HTML"document"resides)."Let’s"stick" “anywebsite.html”"(under"the"same"folder"that"the"HTML"document"resides)."Let’s"stick" to"“POST”"for"the"form"method"in"this"tutorial." to"“POST”"for"the"form"method"in"this"tutorial." Form elements b.Textbox%(Line%11)% b.Textbox%(Line%11)% textbox HTML% HTML% Textbox:"<INPUT"TYPE="text""SIZE="30""NAME="textbox""/><BR>" Textbox:"<INPUT"TYPE="text""SIZE="30""NAME="textbox""/><BR>" Display% Display% " " Note"that"the"TYPE=”text”"attribute"defines"the"use"of"Textbox."The% Note"that"the"TYPE=”text”"attribute"defines"the"use"of"Textbox."The% The name=“textbox” attribute is used in the server side to reference the value input in this field NAME=”textbox”%attribute%is%used%in%the%server%side%to%reference%back%to%the%value% NAME=”textbox”%attribute%is%used%in%the%server%side%to%reference%back%to%the%value% (e.g., if the user entered “abc” in the Textbox and submitted, then the variable named “textbox” will inputted%in%this%field"(e.g.,"If"the"user"entered"“abc”"in"the"Textbox"and"submit,"then"the" have the value “abc” in the server side) inputted%in%this%field"(e.g.,"If"the"user"entered"“abc”"in"the"Textbox"and"submit,"then"the" variable"named"“textbox”"will"have"the"value"“abc”"in"the"server"side)." variable"named"“textbox”"will"have"the"value"“abc”"in"the"server"side)." c.%Password%(Line%13)% password c.%Password%(Line%13)% Password:"<INPUT"TYPE"="password""SIZE="20""NAME="password""/><BR>" HTML% Display% HTML% Password:"<INPUT"TYPE"="password""SIZE="20""NAME="password""/><BR>" " Display% " " 11" 11" % " radio button d.%Radio%button%(Line%16^17)% HTML% <INPUT"TYPE="radio""NAME="radio_button""VALUE="1""/>"Radio"button"1" <INPUT"TYPE="radio""NAME="radio_button""VALUE="2"""CHECKED"/>"Radio"button"2<BR>" Display% e.%Checkbox%(Line%23)% " % d.%Radio%button%(Line%16^17)% Basic structure and tags HTML% % <INPUT"TYPE="radio""NAME="radio_button""VALUE="1""/>"Radio"button"1" <INPUT"TYPE="radio""NAME="radio_button""VALUE="2"""CHECKED"/>"Radio"button"2<BR>" FormDisplay% elements d.%Radio%button%(Line%16^17)% checkbox " <INPUT"TYPE="radio""NAME="radio_button""VALUE="1""/>"Radio"button"1" HTML% e.%Checkbox%(Line%23)% <INPUT"TYPE="radio""NAME="radio_button""VALUE="2"""CHECKED"/>"Radio"button"2<BR>" Checkbox"(default"checked)"" " <INPUT"TYPE="checkbox""NAME="checkbox""VALUE="Checkbox_value""" HTML% e.%Checkbox%(Line%23)% CHECKED"/>" Display% Checkbox"(default"checked)"" " <INPUT"TYPE="checkbox""NAME="checkbox""VALUE="Checkbox_value""" HTML% CHECKED"/>" f.%Drop%down%list%(Line%26^31)% Display% Display% " drop-down listDrop"down"list" f.%Drop%down%list%(Line%26^31)% <SELECT"NAME="drop_down_list">" <OPTION"VALUE="1">Option"1</OPTION>" Drop"down"list" <OPTION"VALUE"="2">Option"2</OPTION>" HTML% <SELECT"NAME="drop_down_list">" <OPTION"VALUE="1">Option"1</OPTION>" <OPTION"VALUE"="3">Option"3</OPTION>" <OPTION"VALUE"="2">Option"2</OPTION>" HTML% <OPTION"VALUE"="4"""SELECTED="yes">Option"4</OPTION>" <OPTION"VALUE"="3">Option"3</OPTION>" </SELECT><BR>" <OPTION"VALUE"="4"""SELECTED="yes">Option"4</OPTION>" </SELECT><BR>" Display% Display% g.%Textarea%(Line%36^38)% g.%Textarea%(Line%36^38)% " " <SELECT"NAME="drop_down_list">" <OPTION"VALUE"="3">Option"3</OPTION>" <OPTION"VALUE="1">Option"1</OPTION>" <OPTION"VALUE"="4"""SELECTED="yes">Option"4</OPTION>" <OPTION"VALUE"="2">Option"2</OPTION>" </SELECT><BR>" <OPTION"VALUE"="3">Option"3</OPTION>" <OPTION"VALUE"="4"""SELECTED="yes">Option"4</OPTION>" </SELECT><BR>" HTML% Basic structure and tags Display% Form elements textDisplay% area g.%Textarea%(Line%36^38)% " <TEXTAREA"NAME="text_area_name""ROWS="10""COLS="30">" " Default"value"in"the"textarea" HTML% g.%Textarea%(Line%36^38)% </TEXTAREA><BR>" <TEXTAREA"NAME="text_area_name""ROWS="10""COLS="30">" Default"value"in"the"textarea" HTML% </TEXTAREA><BR>" Display% Display% " h.%Submit%button%(Line%42)% HTML% <INPUT"TYPE="submit""VALUE="Submit""/>" " submit button h.%Submit%button%(Line%42)% Display% HTML% " Display% " " " " " <INPUT"TYPE="submit""VALUE="Submit""/>" " 12" Example form: <form name="exampleform" acAon="handleform.php" method="post"> Textbox: <input type="text" size="30" name="textbox"><br> Password: <input type="password" size="20" name="password"><br> Radio bu_on selecAon (Only select one out of many opAons)<br> <input type="radio" name="radio_bu_on" value="1"> Radio bu_on opAon 1<br> <input type="radio" name="radio_bu_on" value="2" checked> Radio bu_on opAon 2<br> Checkbox <input type="checkbox" name="checkbox" value="Checkbox_value"><br> Checkbox (default checked)<input type="checkbox" name="checkbox" value="Checkbox_value" checked><br> Drop down list <select name="drop_down_list"> <opAon value="1">OpAon 1</opAon> <opAon value="2">OpAon 2</opAon> <opAon value="3" selected="yes">OpAon 3</opAon> <opAon value="4">OpAon 4</opAon> </select><br> Textarea<br> <textarea rows="10" cols="30">Default value in the textarea</textarea><br> Submit bu_on <input type="submit" value="Submit"><br> </form> Example form display: HTML Character and symbols Entities Reserved characters in HTML and symbols not present on a keyboard are represented with entities examples: Character Entity name and corresponding entity number are equivalent to represent a reserved character in HTML documents Reference Reference ...
View Full Document

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture