Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1

Objectives HTML Tags and Attributes Working with basic HTML tags –,, and Formatting Tags Align Attribute 2

What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor 3

HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as 4

HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. Attribute names and attribute values are case-insensitive. Example: 5

HTML, HEAD, TITLE, and BODY The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The HEAD tags contain all of the document's header information. Things like the document title and so on. One should never put any of the text of your page into the HEAD. This container is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar. The length of the title is pretty much unlimited, but don't go overboard. If the title is very long, the browser may cut the extra length. If you don't type anything between the TITLE tags, or don't include the TITLE tags at all, then the browser will typically use the actual file name for the title. You can have one TITLE container per document. The title can contain only plain text, that is, there should be no other tags inside Title Tag. BODY comes after the HEAD structure. Between the BODY tags, you find all of the stuff that gets displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags. 6

Example Title of page This is my first homepage. This text is bold Example Explained The first tag in your HTML document is. This tag tells your browser that this is the start of an HTML document. The last tag in your document is. This tag tells your browser that this is the end of the HTML document. The text between the tag and the tag is header information. Header information is not displayed in the browser window. The text between the tags is the title of your document. The title is displayed in your browser's caption. The text between the tags is the text that will be displayed in your browser. The text between the and tags will be displayed in a bold font. 7

BODY attributes The BODY tag has many attributes... here are the most useful ones... BACKGROUND="location_of_image" - Background image for web page. Example: If you have logo.jpg in the same directory as your HTML file, use to load it as your background image. BGCOLOR="#hexadecimal_here" - Hexadecimal Color Code for Background Color LINK="#hexadecimal_here" - Hexadecimal Color Code for Links (if left blank, most browsers default to blue.) VLINK="#hexadecimal_here" - Hexadecimal Color Code for Links the User has Already Visited (if left blank, most browsers default to purple.) TEXT="#hexadecimal_here" - Hexadecimal Color Code for Text Color 8

HTML Headings Example :- This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Output This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Headings are defined with the to tags. defines the largest heading. defines the smallest heading. 9

HTML Paragraphs Example This is a paragraph. Output This is a paragraph. This is a paragraph HTML paragraphs are defined with the tag. HTML automatically adds an extra blank line before and after a paragraph. 10

Line Breaks The tag is used when you want to end a line, but don't want to start a new paragraph. The tag forces a line break wherever you place it. Example: This is a paragraph with line breaks The tag is an empty tag. It has no closing tag. 11

Horizontal Ruled Lines Horizontal Ruled Lines are used to separate different areas of a web page. The tag for a horizontal ruled line is. The horizontal ruled line does not have a closing tag. Certain attributes can be added to the tag, such as WIDTH=n (for fixed pixel width) or WIDTH=n% for a certain percentage of the screen wide, SIZE=n to make the line a certain pixel amount thick, and NOSHADE to turn the line's shading off. A plain with no attributes will make the line the full width of the screen. Example of horizontal ruled lines Several attributes can be used within one tag 12

Comments The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. Example: Note that you need an exclamation point after the opening bracket, but not before the closing bracket. 13

HTML Formatting Tags Example:- This text is bold This text is strong This text is big This text is italic This text is emphasized This text is underlined This is subscript and superscript Output This text is bold This text is strong This text is big This text is italic This text is emphasized This text is underlined This is subscript and superscript HTML uses tags like and for formatting output, like bold or italic text. 14

FONT Specifies the size (relative to the base/normal font) and the color of the enclosed text. The tag is deprecated in HTML 4.01 in favor of using the tag with style sheets. The following attributes are available with the FONT tag: SIZE= The SIZE= attribute can either take an absolute value, ranging from 1 (smallest) to 7 (largest), or a relative value. Using the latter will change the font relative to the current font size. For example, will make the font size one step bigger. COLOR= The COLOR attribute takes a hex value, which is the RGB-notation of the desired color. You can also use a color name, although the names are less widely supported than the codes. This coding: This text is larger and red Renders: This text is larger and red 15

ALIGN attribute Many tags support ALIGN attributes. If you want something to be aligned from the left margin, from the center, or from the right margin. The ALIGN attribute is placed in the opening tag before the >. Left Align Center Align Right Align 16