Hyper Text Markup Language

Hyper Text Markup Language PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on
  • Presentation posted in: General

What the HTML?.

Download Presentation

Hyper Text Markup Language

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


1. Hyper Text Markup Language HTML 1 SI200

2. What the HTML? “HTML describes the structure of text-based information in a document by denoting certain text as links, headings, paragraphs, lists, and so on and to supplement that text with interactive forms, embedded images, and other objects. “ (Wikipedia) You can control more than just the words of a message!

3. How does it work? HTML is written in the form of tags, surrounded by angle brackets <>. HTML can describe the appearance of a document, and can include embedded scripting language code (such as JavaScript) which can affect the behavior of Web browsers and other HTML processors.

4. How Do I Write HTML? Text editor It’s just a text file; type it all in a text editor Add-on to existing program Word can save to HTML; ditto power point. Most useful for transferring existing documents to web Specialized program MS Frontpage, HoTMetal, Dreamweaver, etc

5. Writing HTML in SI200 You need to know the basics of HTML and be able to read it & write simple documents. For HTML assignments you will need to use a simple text editor like Notepad. Later you can use HTML generators (Front page).

6. Basic Procedure Start a plain Text Editor(Notepad) Enter HTML language content Save as a *.html or *.htm in your directory Start a web browser (MS Internet Explorer) Enter the pathname of the file in the address field or click on the file name to see your page. View Source to edit HTML code

7. Example Web Site <!DOCTYPE html> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>

8. Viewing HTML On One Host

9. A Word About Data Directories

10. So What, Who Cares? HTML wasn’t made just to view documents on individual computers. HTML was invented to exploit the capabilities of the new WWW. HTML documents must be put on a computer that acts as a server in order to make it available to other machines on the network.

11. You’ve Been Served You have been allocated space on the CS Department web server. Your web pages will be viewable ONLY aboard USNA. Set up will be discussed in a separate document. Basic required skill set is just file and folder management.

12. Tag Basics Tag names start with <TAG> Tag names are closed by a </TAG> Basic Form <tag_name attribute_name=argument> text </tag_name> Case is not important in tag names New lines & indentation don’t matter, but they make your code easier to read Nested Tags: <Tag1><Tag2>Hi</Tag2></Tag1> <!-- this is a comment --> for humans!!! Where do you find out about Tags and attributes: In class examples HTML GUIDE Text Deitel Chapter 3 and 4 http://intranet.nps.navy.mil/Code05/WAT/tutorial/Tutorials.htm http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml For a tutorial introduction to HTML see: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html Quick reference: http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml Where do you find out about Tags and attributes: In class examples HTML GUIDE Text Deitel Chapter 3 and 4 http://intranet.nps.navy.mil/Code05/WAT/tutorial/Tutorials.htm http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml For a tutorial introduction to HTML see: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html Quick reference: http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

13. Resources Where do you find out about tags and tag attributes? In class examples Power Point presentations HTML Quick Reference (in Bb Course Documents) For a tutorial introduction to HTML see: http://www.w3schools.com/html/html_examples.asp Look at different HTML “source” from the web Where do you find out about Tags and attributes: In class examples HTML GUIDE Text Deitel Chapter 3 and 4 http://intranet.nps.navy.mil/Code05/WAT/tutorial/Tutorials.htm http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml For a tutorial introduction to HTML see: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html Quick reference: http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml Where do you find out about Tags and attributes: In class examples HTML GUIDE Text Deitel Chapter 3 and 4 http://intranet.nps.navy.mil/Code05/WAT/tutorial/Tutorials.htm http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml For a tutorial introduction to HTML see: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html Quick reference: http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

14. A Basic Example See sfanw1.html

15. The Basic Example Explained <HTML> says this is an HTML document <HEAD> contains some information about the document itself <TITLE> puts the string in the tile bar of the window <BODY> is start of actual displayed document

16. Modifying The Text In The Body See sfanw2.html <Center> - used for centering a group of items <H1>This is a headline</H1> The browser will put “This is a headline” in large font text on the screen. Try <H2>,<H3>,<H4>,<H5>,<H6> <p> This is a paragraph</p> <p Align = “right”> aligns the content of the tag “left”, “center”, “right”

17. Modify Text Tags (cont) <B>Puts the text between the tags in bold font </B> <Strong> A new version of bold </Strong> <I> Puts the text between the tags in italic text</I> <U> This is underlined </U> <EM> Emphasize text (italics) </EM>

18. Modify Text Tags (cont) <SMALL> Makes text small</SMALL> <BIG> Makes Text Big</BIG> <STRIKE>Put a line through this</STRIKE> H<SUB> 2 </SUB>O subscript Superscript exponent 10<SUP>2</SUP> <BLINK> Annoying Blink tag</BLINK> Does not always work

19. Lists See sfanw2a.html Formatting of text into ordered or unordered lists Lets you do bullet lists in html; <OL>,<UL>, <LI> note closing tag</LI> not required Lists can be nested Ordered lists Index attribute Type = “1”,”I”,”i”,”a”, “A”

20. Images Images are a crucial part of the web surfing experience. Popular image file formats supported: gif, jpg, Bmp Tag format: <IMG SRC=skier.jpg> Attributes: BORDER, HEIGHT, WIDTH ALT - print an alphanumeric message in case picture is not displayed <Body Background = “turquoise.bmp”>

21. Images See “sfanw3-1.html” Multiple images on one line Mixed Text and Images Size Wallpaper background set to an image <Body Background = “turquoise.bmp”> Edit background in MS “Paint”

22. Hyperlink Tags The core web surfing is the ability to follow hyperlinks <A HREF=URL>”these tags make the enclosed text a hyperlink”</a> Create a mail to link to send a message to “[email protected]” <A HREF=MAILTO:[email protected]>

23. The Basics - Hyper links You may jump to a marker in the same file: See sfanw4.html <A NAME= “marker_name”> tag creates markers in the html file <A HREF = “filename#marker_name”> tags let you jump to places Filename is optional if it is within the same file Good practice to put “Top” or “home” link jumps <A HREF = "#top">Back to the top</A>

24. Anchor Tags See sfanw5 To link to another file: Know path to that file Use relative links whenever possible <A HREF=“subdir/myFile.html”> To link to a place within the document <A HREF=“subdir/myFile.html#placeName”> To link to a document on another server <A HREF=“http://servername.com/myFile.html”>

25. Anchor Tags Examples <A HREF= MAILTO:[email protected]"> president</a> <A HREF = "#top">Back to the top</A> <A HREF = "sfanw4.html#top">Go to previous version.</a> <A HREF = "http://www.cs.nps.navy.mil/people/faculty/baer/index.html"> Look at the authors home page.</a>

26. Colors You can change background and text colors easilyfor the whole text : See sfanw6.html <BODY bgcolor="black" text="firebrick" alink="yellow" vlink="lightcoral" link="orangered> You can find colors easily on the web; see http://www.w3schools.com/html/html_colornames.asp Can specify color by RGB hex code Change bgcolor =#FF0000 text=#00FF00 changes the background to red and text to light green http://www.immigration-usa.com/html_colors.html

27. Sample Colors

  • Login