HTML BASICS Creating Web Pages with HTML CIS 133 Web Programming Concepts 1
HTML Introduction Review 2 Syntax Tags (aka Elements) Tags may contain Attributes Format Types of tags Containers - have opening and closing Standalone tags – opening closes itself Whitespace Any whitespace you type in your html file will be ignored by the browser
The Structure of an HTML File 3 DOCTYPE tag HTML tag Root element Can have only one root element Head element Contains information about the document Can contain meta elements Instructions in this section are done before the page is displayed and remains in memory. Body element Contains content to be displayed in the Web page Sequential process of each line content
HTML Declaration 4 HTML 4.0 Declaration DOCTYPE declares the standards needed for proper interpretation and syntax checking by the browser. 3 standard modes: Transitional allows the use of the deprecated tags Frameset allows both the use of deprecated tags and the use of frames Strict prohibits the use of any of the deprecated tags <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN” 1-transitional.dtd> HTML 5 Declaration
Title tag 5 Title element Required element of head element Specifies page title that is displayed in title bar of a user’s Web browser Web document can only have one Utilized by search engines Should include topic of web site. My cool web page
Element Attributes 6 Provide browsers with additional information about how to treat/refine them Attributes Inserted into element’s opening tag using the syntax attribute1=“some value" attribute2=“some value“
Inline tags 7 Nesting The technique of placing one element within another Pairs of tags must match Must have matching closing tags
White space and HTML 8 White space Blank spaces, tabs, and line breaks within the file by default are displayed either as a single space or ignored. To display spacing, use block-level tags or use non-breaking space. Browsers See no difference between a blank space, a tab, and a line break
Creating Headings 9 Headings Titles placed within the page body HTML supports six heading elements, numbered h1 through h6 defines the most important heading. defines the least important heading. Syntax to mark a heading element content
Creating Paragraphs 10 Paragraphs Another popular block-level element To mark content as a paragraph content The tag starts a new line with a blank space above it, separating the new paragraph from the preceding element.