1 / 32

HTML tags (special formatting symbols)

HTML tags (special formatting symbols). Markup language. consists of markup tags how elements are to be displayed in a browser E.g. HTML, XML, XHTML plain text cross-platform : can be used/shown on different computer platform.

larissa-rowland
Download Presentation

HTML tags (special formatting symbols)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML tags(special formatting symbols)

  2. Markup language • consists of markup tags • how elements are to be displayed in a browser • E.g. HTML, XML, XHTML • plain text • cross-platform : can be used/shown on different computer platform

  3. Markup language • HTML = hypertext markup language - case-insensitive - extra spaces / blank lines • XML = extensible markup language - case-sensitive - OK to define own element name - all elements should be closed • XHTML = extensible hypertext markup language

  4. XML <recipe name="bread" prep_time="5 mins“ cook_time="3 hours"> <ingredient amount="8 unit="dL">Flour</ingredient> <instructions> <step>Mix all ingredients together.</step> <step>Bake in the oven at 180(degrees)C for 30 minutes.</step> </instructions> </recipe>

  5. <html> <head> <title>something</title> </head> <body> Something </body> </html> <!--title : in <head>--> <!--content--> Basic structure

  6. A-type Text formatting tags Type : Bold<b></b> (<B><STRONG>) Italic<i></i> (<I> <EM> <VAR> <CITE><DFN><ADDRESS>) Underline<u></u> Emphasize<em></em> Section header<h1></h1>~<h7></h7> • size • bold • centre

  7. A-font Text formatting tags Font properties : <font></font> <font color=“……”(tag attribute) ></font> • color=“#FFFFFF” / color=“white” • face=“Arial” • size=“3”

  8. A-RGB RGB code • Red/Green/Blue • 24bits • R/G/B : 2-digit hexadecimal no. (00-FF) • Binary 0000 0000 • Hexadecimal 0 0 • 00 = no light intensity (no light of that colour can pass through) • FF = maximum

  9. A-RGB2 How to make words clearer? • High contrast between foreground and background Higher contrast : 00  FF (bigger difference in the R/G/B code) #FFFFFF  #000000 #FF00FF  #00FF00 #00FFFF  #FF0000 #FFFF00  #0000FF • Bold/Italic/……

  10. B Paragraph formatting tags • <p>(</p>)  extra blank line align=“left” / “right” / “center” • <br>  line break • <center></center>

  11. C-Links Inserting hyperlinks • <a></a> • href = “website.htm” (URL) • target = “_self” “_blank” / “new” “_top” “_parent”

  12. C-Path Relative path Absolute path • Relative path : backk.jpg music/abc.htm • Absolute path : http://www.pyc.edu.hk/....htm Z:/public_html/music/abc.htm

  13. C-Path Common errors Location : man.htm : Z:/  public_html  folder “man” index.htm : Z:/  public_html • www.pyc.edu.hk/~pyc0xxxx/man.htm • man.htm • public_html/man/man.htm • www.pyc.edu.hk/~pyc0xxxx/man/man.htm

  14. C-Path Answer • http://www.pyc.edu.hk/~pyc0xxxx/man/man.htm • man/man.htm • Z:/public_html/man/man.htm

  15. C-Image Inserting image • <img> • src=“backk.jpg” (URL) • alt=“my ppt pic!” (Short description) • align=“left” / “right” / “centre” • border=“0” • width=“300” • height=“300”

  16. C-Audio Inserting audio • <embed></embed> (“installed”) • src=“music.mp3” (URL)  animation • autoplay / autostart=“true” / “false” • loop=“true” / “false” • hidden=“true” / “false” Inserting horizontal line • <HR>

  17. Table D Row <table></table> (table definition) <TR></TR> (a new row) <TD></TD> (a cell) Column

  18. E Background • bgcolor=“#FFFFFF” (RGB value) / bgcolor=“white” (colour name) • background=“backk.jpg” background=“http://www.pyc.edu.hk/~pyc04112/bac kk.jpg”

  19. Revision first!

  20. Exercise • Q1 : I am stupid • Q2 : • Q3 : p.65 Activity 2 (1) File name : man.jpg (use relative path) Link to : www.pyc.edu.hk Alternative text : A man is flying!

  21. Answer 1)<b><i><u>I am stupid</u></i></b> 2) <a href=http://www.pyc.edu.hk> <img src=“man.jpg” alt=“A man is flying!”></a>

  22. Text editor Web authoring tool • Edit HTML directly • Microsoft Frontpage • Macromedia Dreamweaver • IDE = Integrated Development Environment - Code editor / GUI editor / Spilt

  23. simple text editor (e.g. notepad) Not user-friendly Need to remember tags professional software (e.g. MS Frontpage) with GUI More user-friendly WYSIWYG Text editor vs Web authoring tool

  24. Harder to view the structure of the whole site Higher chance to make error More HTML knowledge is needed Higher degree of control Easier to view the structure of the whole site Lower chance to make error Less HTML knowledge is needed Relatively lower degree of control Text editor vs Web authoring tool

  25. Hyperlinks structure • Linear = one by one • Hierarchical = spread (many choices) • Web = connect each other

  26. Linear • read sequentially – long piece >1 page • direct, guide e.g. reading a online story tutorial

  27. Hierarchical • let user to choose where to go • different “levels” • A • B • c • categorize content e.g. navigation menu

  28. Web • interlink web pages • same importance • e.g. FAQs

More Related