Introduction to HTML Communication Skills
- 1. Introduction to HTML IS103 Communication Skills
- 2. Content Overview • Introduction to HTML • Origins of HTML • HTML Tags and Document Structure • Basic HTML Syntax • Comments • HTML Color Codes • Setting HTML Document Properties : Page Background and Text Colors • Headings and Paragraphs in HTML 2
- 3. Introduction to HTML • HTML is a language for describing Web pages. • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags • HTML uses markup tags to describe web pages • HTML Tags • HTML markup tags are usually called HTML tags • HTML tags are keywords surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • 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 3
- 4. Origins of HTML • HTML is based on SGML (Standardized General Markup Language). • HTML has, since, evolved into a presentation language. 4
- 5. Writing Tools • HTML documents are text documents. Therefore, any text editor can be used to create a HTML document, as long as it can save your work on a disk in text file format. • The standard Microsoft Windows text editor, Notepad or Notepad ++ can be used. 5
- 6. HTML Document Structure • HTML documents contain text (content of the page). • HTML uses .html as the file extension or suffix. • Embedded tags provide instruction for the structure, and appearance of the content. 6
- 7. HTML Document Structure, cont. • The HTML document is divided into two major parts: • HEAD – contains information about the document: • Title of the page, which appears at the top of the browser window • Meta tags, used to describe the content (used by search engines) • BODY – contains the actual content of the document • This is the part that will be displayed in the browser window. 7
- 8. Sample HTML Document <HTML> <HEAD> <TITLE> My web page </TITLE> </HEAD> <BODY> Content of the document </BODY> </HTML> 8
- 9. HTML Tags • All HTML tags are made up of a tag name and sometimes they are followed by an optional list of attributes which all appear between angle brackets <> • Nothing within the brackets will be displayed by the browser (unless the HTML is incorrectly written and the browser interprets the tags as part of the content). • Attributes are properties that extend or refine the tag’s functions. • According to the HTML standard, tag and attribute names are not case-sensitive. 9
- 10. Basic Syntax • Most (but not all!) HTML tags have a start tag and an end tag: <H1> Hello, world! </H1> • All HTML documents start with <HTML> and end with </HTML>. • Standalone tags: • There are a few HTML tags which do not use an end tag and are used for standalone elements on the page: <img> to display an image <BR> Line break <HR> Horizontal Rule 10
- 11. HTML Tag Attributes • Attributes are added within a tag to extend a tag’s action. • Attributes belong after the tag name; each attribute should be separated by one or more spaces. • Most attributes take values which follow an equal sign “=“ after the attribute’s name. • Values are limited to 1, 024 character in length. • If an attribute’s value is a single word or number (no spaces), you may simply add it after the equals sign. All other attribute values should be enclosed in single or double quotation marks, especially those values that contain several words separated by spaces. 11
- 12. HTML and Browsers • Browsers will ignore certain information such as: • Tabs • Multiple spaces will appear as a single space. • For example: “Hello, How are you?” The browser will ignore the blanks and new line: Hello, How are you? 12
- 13. Comments <!-- --> • Comments are another type of textual content that appears in the source HTML document but is not rendered by the user’s browser. • Comments fall between the special <!-- and --> markup elements. Browsers ignore the text between the comment character sequences. • You can put anything you like inside a comment. • Here are some sample comments: <!– This is a comment --> <!– This is a multiple-line comment that ends on this line --> 13
- 14. Setting Document Properties • Document properties are controlled by attributes of the BODY element. • For example, there are color settings for the background color of the page, the document’s text and different states of links. 14
- 16. 16 More Color Codes 1. WHITE 2. BLACK 3. RED 4. GREEN 5. BLUE 6. MAGENTA 7. CYAN 8. YELLOW 9. AQUAMARINE 10. BAKER’S CHOCOLATE 11. VIOLET 12. BRASS 13. COPPER 14. PINK 15. ORANGE 1. #FFFFFF 2. #000000 3. #FF0000 4. #00FF00 5. #0000FF 6. #FF00FF 7. #00FFFF 8. #FFFF00 9. #70DB93 10. #5C3317 11. #9F5F9F 12. #B5A642 13. #B87333 14. #FF6EC7 15. #FF7F00
- 17. The Body Element • The BODY element of a web page is an important element in regards to the page’s appearance. • Here are the attributes of the BODY tag to control all the levels: TEXT="#RRGGBB" to change the color of all the text on the page (full page text color.) • This element contains information about the page’s background color, the background image, as well as the text and link colors. 17
- 18. Background Color • It is very common to see web pages with their background color set to white or some other colors. • To set your document’s background color, you need to edit the <BODY> element by adding the BGCOLOR attribute. • The following example will display a document with a white background color: <BODY BGCOLOR=“#FFFFFF”></BODY> 18
- 19. Text Color • The TEXT attribute is used to control the color of all the normal text in the document. The default color for text is black. • The TEXT attribute would be added as follows: <BODY BGCOLOR=“#FFFFFF” TEXT=“FF0000”></BODY> In this example the document’s page color is white and the text would be red. 19
- 20. HTML Headings • Users have a hard enough time reading what’s displayed on a screen. A long flow of text, unbroken by title, subtitles , and other headers, crosses the eyes and numbs the mind, not to mention the fact that it makes it nearly impossible to scan the text for a specific topic. • There are six levels of HTML headings that you can use to structure a text flow into a more readable. More manageable document. 20
- 21. Heading Tags • The six heading tags – written as <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - indicate the highest (<h1>) to lowest (<h6>) precedence a heading may have in the document. • Always include the appropriate heading end tags in your document, as the browser will not insert them automatically. 21 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Function Define one of six levels of headers End tag </h1>, </h2>, <h/3>, </h4>, <h/5>, </h6> Contains text Used in body content
- 23. The Align Attribute • The default heading alignment for most browsers is left. • The align attribute can change the alignment to left, center, right, or justify. • Below is the common syntax of a heading tag including alternative alignments: <h1 align=right>Right over here!</h1> <h2 align=left>Slide back left.</h2> <h3 align=center>Smack in the middle.</h3> 23
- 24. The Align Attribute, cont. 24
- 25. Appropriate Use of Headings • It is often good form to repeat your document’s title in the first heading tag because the title you specify in the <head> of your document doesn’t appear in the user’s main display window. • The following HTML segment is a good example of repeating the document’s title in the header and in the body of the document: <html> <head> <title> My First HTML Document </title> </head> <body> <h3> My first HTML Document</h3> </body> </html> 25
- 26. The <font>Tag • The <font> tag lets you change the size, style, and color of text. 26 <font> Function Sets the font size for text End tag </font> Attributes color, face, size
- 27. The Size Attribute • The value of the size attribute must be one of the virtual sizes (1-7). This value is preceded by a plus or minus (+ or -) sign to define a relative font size that the browser adds to or subtracts from the base font size. • The basic syntax used for changing the size attribute of a font is: <font size=+5> Crazy Frog</font> 27
- 28. The Color Attribute • The color attribute for the <font> tag sets the color of the enclosed text. The value of the attribute may be expressed in either of two ways: • As the red, green and blue (RGB) components of the desired color, or • As a standard color name. • Enclosing quotes are recommended but not required. 28
- 29. The Color Attribute in Use • For example, to create basic yellow text, you might use: Here comes the <font color=#FFFF00>sun</font>! • Alternatively, you can set the enclosed font color using any one of the many standard color names. For instance, you could have made the previous sample text yellow with the following source: Here comes the <font color=yellow>sun</font>! 29
- 30. The Face Attribute • The quote-enclosed value of face is one or more display font names separated with commas. • The font face displayed by the browser depends on which fonts are available on the individual user’s system. The browser attempts to match the name specified with a font name supported by the user’s system. • If none matches, the text display defaults to the font style the user set in the browser’s preferences. 30
- 31. The Face Attribute in Use • The basic syntax used to set font faces in HTML is as follows: <font face=“courier new”> This text would be displayed using font type “courier new”</font> 31
- 32. The <p> Tag • The <p> tag signals the start of a paragraph. Each paragraph should start with the paragraph tag <p> and end with the corresponding </p> end tag. 32 <p> Function Defines a paragraph of text End tag </p>; often omitted in HTML Contains text
- 33. The <p> Tag in Use <body> This is the first paragraph, at the very beginning of the body of this document. <p> The tag above signals the start of this second paragraph. When rendered by a browser, it will begin slightly below the end of the first paragraph, with a bit of extra whitespace between the two paragraphs. <p> This is the last paragraph in the example. </body> 33
- 34. Summary • Introduction to HTML • Origins of HTML • HTML Tags and Document Structure • Basic HTML Syntax • Comments • HTML Color Codes • Setting HTML Document Properties : Page Background and Text Colors • Headings and Paragraphs in HTML 34
- 35. References C. Musciano & B. Kennedy. (2006). HTML & XHTML : The Definitive Guide, 6th Edition. United States of America: O’Reilly,Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 Gary P. Schneider & J. Evans. (2007). The Internet, 6th Edition. United States of America: Thomson Course Technology. 35
Editor's Notes
- #15: Colors are set using “RGB” color codes, which are represented as hexadecimal values. Each 2-digit section of the code represents the amount (in sequence) of red, green or blue that forms the color. For example, a RGB value with 00 as the first two digits has no red in the color.