Creating a Web Page CSC 121
Short History of WWW/HTML Internet came first (late ’60s). ARPANET – US military network WWW using Hypertext (circa 1989) invented as a means of Internet navigation Tim Berners-Lee @ Geneva, Switzerland Hyper Text Markup Language (HTML) First publicly documented – 1991 22 Elements; 13 remain in HTML 4 Wikipedia; HTML 7.
Evolution of HTML Early - No standards. Competing browsers Netscape Navigator Microsoft Internet Explorer Introduced extensions to gain competitive edge Not compatible World Wide Web Consortium (W3C) Standards (not enforceable)
HTML Status Lots of older web pages left around. Old features may be deprecated by W3C, but may be supported for indefinite time by various browsers. What works in one browser may work differently or not at all in another.
Tools HTML documents are simply text files. Only software package needed is a text editor. An HTML converter takes text in one format and converts it to HTML code.
HTML Document HTML document may have a variety of elements: Title Headings Paragraphs And others . . . Elements are marked with tags.
HTML Tag Syntax Tags One-sided Tag Syntax <element /> Example: two-sided One-sided Tag Syntax <element /> Example: <br /> - - causes a line break
HTML Tag Syntax Tags Two-sided Tag Syntax one-sided two-sided Two-sided Tag Syntax <element attributes>content</element> Example: <h1 align=center>Title of Document</h1>
HTML Coding Conventions Use lowercase for tag names, attribute names. Use closing tags for two-sided tags. Don’t omit space and / in one-sided tags. HTML 11
Places to learn HTML, etc. http://www.w3schools.com/ http://www.w3.org/
HTML Codes entered in Editor <head> <title>The Document by Me</title> </head> <body> </body> </html>
See html1
Creating a Paragraph See html2 HTML formats text through the use of tags ignores things such as blank spaces, blank lines, or tabs Use <p> to begin the paragraph Use </p> to close the paragraph See html3
Creating Lists ordered list (OL) See html4 unordered list (UL) definition list (DL) See html5
Other Tags Logical Character Tags Physical Character Tags EM STRONG CODE KBD VAR CITE any combination Physical Character Tags B I TT BIG SMALL SUB SUP
More Tags blinking text (BLINK) – 2-sided link (A) – 2-sided insert an image (IMG) horizontal rule (HR)