The HTLM History HMTL Basics

 World Wide Web  World Wide Web (Web):The part of the Internet that supports multimedia and consists of a collection of link documents  HTTP  HTTP (Hypertext Transfer Protocol): set of rules for exchanging text, graphic, sound, video, and other multimedia files  Web Site  Web Site: a related collection of web pages that is created and maintained by someone

 Web server  Web server (Host): a computer that stores web pages and sends (serves) requested web pages  Publishing  Publishing: copying web pages to a Web server so anyone who has Internet access can view it.

Internet Public Access Share Information (personal, product, classroom, etc) with the publicIntranet Private Share Information with employees or members of a groupExtranet Select business partners or customers Share information with partners or select customers with password

 Program that interprets and displays web pages and enables you to view and interact with a web page Flock Safari (Mac) Internet Explorer Firefox Google Opera

 URL  URL (Uniform Resource Locator): the address of a document or other file accessible on the Internet   Hyperlink  Hyperlink (link): an element used to connect one web page to another web page on same or different server

language  The authoring language used to create documents on the World Wide Web.  Tags or Markups  Tags or Markups: use of special instructions to define the structure and layout of the web document  Platform independent  Platform independent: you can create an HTML files on one type of computer and then use a browser on another type of computer to view that file

 Tim Berners-Lee & Robert Calliau 1989  Developed a collection of tags that described how a document should look when viewed in a browser  Made it possible to create hyperlink s  Tim Berners-Lee founded World Wide Web Consortium 1994  Encourages universality of HTML  Promotes an open forum for discussion among Web Designers  Seeks to promote standards for the evolution of the Web to help make web accessible to everyone  Regarded as the de facto organization to govern HTML

 DHTML  DHTML : combination HTML, cascading style sheets, and scripting language. Creates interactive, animated web pages  XML  XML : uses tags to describe the structure and content of a document, not the format  XHTML  XHTML : reformation of HTML so it conforms to XML rules. Combines the benefits of the display features of HTML and the stricter coding standards required by XML.  Handheld devices and mobile phones can only display XHTML code

 Need an HTML Text Editor  Type the code directly in the document  Notepad or Word  Save document with an extension.htm or.html  Software Application Software:  Dreamweaver, Front Page, Sausage Software HotDog  WYSIWYG  WYSIWYG (What You See Is What You Get)

Title Paragraph Background Text Links Heading 2 Image Links Image Heading 1 Body Navigation Bar

 Click Start button on Taskbar  Type> Notepad in the search bar – choose Notepad ++  Save files with an.html extension  index.html  Filenames: can contain letters, numbers, and underscores  Cannot contain: : * ? Or spaces  To open an html file later  File > Open > click arrow to the right of Type > choose All > click the file you want to open

: : begins the web page in XHTML  Indicates the version and type of HTML used; includes a URL reference to a DTD at the W3C site.  Strict: prohibits use of depreciated tags Deprecated tags: tags that the W3C has earmarked for eventual removal; replaced with newer, more function tags.  Transitional: allows the use of deprecated tags  Framseset: used to support frames on the Web page; allows use of deprecated tags

 Indicates the start and end of an HTML document  Indicates the start and end of a section of the document used for the title, keywords, metatags and other document header information.

 Indicates the start and end of the Web page body  Indicates the start and end of the text section called a heading; sizes range from the largest through smallest.

 Indicates the start of a new paragraph; inserts a blank line above the new paragraph.

 Indicates the start and end of an unordered list (bulleted list). There are three types of unordered lists:  Type=“square” Type=“disc” (default) o Type=“circle”  Indicates the start and end of an ordered list (numbered list)  Indicates that the item that follows the tag is an item within a list

 Indicates the start and end of a definition list First line or term at the left edge; Next set tags are for the definition are indented from the left edge

 Inserts a horizontal rule (line)  default: line from left margin to right margin  : Increases the width of the line  : line width increases and it doesn’t appear shaded (shaded is default)

 Inserts a line break at the point where the tag appears. Appears as single spacing between lines.

Images can be used as the background, to organize, or to clarify information  Types of files used on the Web  GIF  GIF (Graphics Interchange Format): clipart  JPG  JPG (Joint Photographic Experts Group): photos  PNG  PNG (Portable Network Graphics): Fireworks file  Image Tag syntax

 Align: controls alignment (bottom, middle, top, left, or right) align=“top”  Alt: allows text to be associated with image alt=“flower pot”  Border: defines the border width border=“5”  Height: defines the height of the image height=“2.5”  Hspace: defines the horizontal space that separates the image from the other text hspace=“15”  vspace: defines the vertical space that separates the image from the other text vspace=“1”  Width: defines the width of the image width=“3”

 Predefined colors choices that can reference by name:  Silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow, cyan  Other colors use a Hexadecimal number combination  Hexadecimal is a base of 16 digits  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f  Hexadecimal colors use six digits  White = ffffff (all colors)  Black = (no color)  Background image tag:  bgcolor=“red”  bgcolor=“#fffbc6”

Option #1  Open the browser  File > Open > browse to file > OK Option #2  Browse to file using Computer  Multitask  Multitask: Use Taskbar to switch between text editor and browser Refresh  After making changes in the text editor, click Refresh in the browser

Print Web page from the Browser  Click the Print icon (take a screen snipping) Print HTML code in Notepad  File > Print (take a screen snipping)