Getting Started with HTML HTML – Hypertext Markup Language

HTML PRIMER Hypertext Markup Language Standard format/official language of all web pages (the WWW) Enhanced with JavaScript, Java, RealAudio, RealVideo, VRML, Flash and Shock animation, Fireworks, etc. Can be created from scratch using Notepad, Word, any word processing software

HTML TAGS Instructions to a Web browser specifying how a document is to be read HTML formatting commands are enclosed in or wickets Regular (non-code) text is not enclosed in wickets NOT case sensitive, but must be spelled correctly,, and are all the same Easier to see, use to emphasize tags Use to emphasize text, not tags is not good practice – don’t do this!

Tag Components Tag elements Opening and closing tags Standalone tags Attributes and attribute values Closing tag switches Tag element Left Wicket Right Wicket Basic anatomy of an HTML tag

Tag Elements The first word within the tag determines the identity Elements differentiate one tag from other tags Typically an abbreviated or acronym-like form of the tag name = Horizontal rule tag element = Break tag element = Anchor tag element

Opening/Closing Tags Most HTML tags appear in a tag set Tag set begins with an opening tag and ends with a closing tag. Every thing between the opening/closing tags is affected Closing tag Switch My Web Page Opening tagClosing tag

Examples of opening/closing tags Erich’s Porsche was the fastest in town.

Standalone Tags Minority of tags in HTML Do not require a corresponding closing tag Common Break inserts a line break Paragraph inserts a paragraph break Horizontal Rule Tag Tag element Attribute Value Example of a standalone tag

Standalone Tag Examples Erich’s Porsche is the coolest and fastest car in town. Erich got a speeding ticket. Janet’s Toyota is the slowest and ugliest car in town. Janet will never get a speeding ticket.

Attributes and Attribute Values Terms within a tag (within the wickets) specify characteristics of the tag element Example: tells the browser to display a horizontal line as 60% of the width of the browser window HR is the ELEMENT WIDTH is the attribute 60% is the attribute value

Closing Tag Switches Add the switch (forward slash / ) to the closing tag My Web Page Without the switch, it is like the tag never existed!

Characteristics of HTML Tag Attributes A tag can have only one element All attributes are optional Not all tags have attributes Those tags that have multiple attributes can feature all attributes simultaneously Attributes only appear in opening tags; closing tags never include attributes

Example HR (horizontal rule/line) defaults Width=“100%” Alignment=“Center” Size =“2” If no attributes are specified, browser will use these defaults

HTML DOCUMENT COMPONENTS Beginning and end of an HTML document are marked with tags HTML document normally has two sections HEAD BODY

HEAD Section This section contains Document TITLE Author Date created Method of creation Keywords Enclosed by … tags Metadata

Information about the document, e.g., author, date created, and keywords Used by search engines to index a Web page in a database Not required, but helpful if you want users to be able to locate your Web site using a search engine Title of document will show in title bar in browser Rest of information in HEAD section will be invisible to visitors to site

BODY Section Enclosed by the … tags Contains the actual content of the document Everything you want visitors to see in their browser window when they access the page must be included in the BODY section

PROBLEMS WITH HTML Coding large documents in a complex website can become Time-consuming Tedious Cumbersome Must remember to close tags you opened

ACTIVITY 1: VIEWING SOURCE CODE Open your web browser and wait for the opening page Click View, Source or Page Source Examine the tags – Can you guess what some of them do? Great way to see how something is coded so you can put on your web page!

FILE TYPES AND EXTENSIONS Need to know this because you have to save code a certain way Computers add file extension to file names to tell them apart.docxMS Word document.rtfMS Rich Text Format.txtText files.htmlFiles that can be viewed on the Web

FILE TYPES AND EXTENSIONS Name coded document _____.html Save document as text type.html extension is like putting up a sign that says, “Hey browser, read me. I’m an HTML document!”

USING HEADINGS Headings help readers find important portions of text 6 standard headings give you an easy way to control the size of text H1 through H6 Numbers indicate the level of importance H1 is the biggest VERY BIG H6 is the smallest VERY SMALL

NUMBERED/BULLETED LISTS One of the most powerful ways to organize information on a web page Unordered (bulleted) list -, gives bullets Ordered (numbered) list - gives 1, 2, 3 or a, b, c or I, II, III… Mark the beginning of the list with a tag or Mark the items to be listed with the list tag

ORANGES APPLES PEARS Ordered Lists Example: 1.ORANGES 2.APPLES 3.PEARS Type this in NOTEPAD Get this in Browser