Fluency with Information Technology 7th Edition Chapter 4 A Hypertext Markup Language Primer
Learning Objectives 1.1 Know the meaning of and use hypertext terms 1.2 Use HTML tags to structure a document 1.3 Use HTML tag attributes 1.4 Use Cascading Style Sheets (CSS) to style a web page 1.5 Use HTML tags to link to other files 1.6 Explain the differences between absolute and relative pathnames 1.7 Use HTML to encode lists and tables to structure a web page
1.1 Web Pages and Hypertext Web pages are created, stored, and sent in encoded form A browser converts them to what we see on the screen Hypertext Markup Language (HTML) is the main language used to define how a web page should look Hypertext is text that links to other web destinations using a hyperlink We will use the current version of HTML - HTML5
1.2 Structuring and Formatting with Tags Documents can be formatted in many ways Formatting instructions are given by tags, which the browser reads and follows Tags are words or abbreviations enclosed in angle brackets, < and > Many tags come in pairs The second tag of the pair comes with a slash: <title> Fluency </title> The tag pair surrounds the text to be formatted like parentheses
Each formatting feature requires its own tag Working With Tags Each formatting feature requires its own tag Programmers and web designers should remember common tags Uncommon tags can be looked up online Some tags are required
Required Tags HTML tags that are required for every web page: <!doctype html> <html> <head> </head> <body> </body> </html> This form must always be followed<html> <head> <body>
Required Tags: The <head> Section <head> <meta charset="UTF-8" /> <title>Title</title> -additional material discussed later- </head> The head section contains the beginning material like the title and other information that applies to the whole page
Required Tags: The <body> Section <body> the main content of the page goes here </body> The body section contains the content of the page.
HTML Format Versus Display Format HTML source markup tells the browser how to produce the formatted page based on the meanings of the tags HTML is written in a structured format to make it easier for people to understand Indenting in the markup is frequently used to clarify the tags’ meanings
Tags: The <title> Tag <title>Serena Williams</title> These tags can be read as “this is where the title starts” and “this is where the title ends” <title> is referred to as the start or open tag </title> is the end or close tag The title appears on the title bar of the browser
Tags: Bold and Italic HTML has tags: for bold text, <b> and </b> for italic text, <i> and </i> for paragraphs, <p> and </p> More than one kind of formatting can be used at a time: <p><b><i>Veni, Vidi, Vici!</i></b></p> produces Veni, Vidi, Vici!
Tags: HTML's White Space and <pre> Spaces that have been inserted for readability are called white space, created with spaces, tabs, and new lines (Return or Enter) HTML ignores white space, and the browser turns a sequence of white space characters into a single space Preformatted information contained within <pre> and </pre> tags is displayed exactly as it appears (white space and all)
Tags: Headings Documents can have headings and subheadings, indicating the structure Headings display content on a new line HTML provides several levels of heading tags: <h1> and </h1> level one – displayed as the largest and boldest <h2> and </h2> level two … <h6> and </h6> level six
<p><b><i> …text… </i></b></p> Tags: The Proper Order It doesn’t matter in which order you start the tags The rule is to make sure the tags “nest” correctly They should mirror each other All the tags between a starting tag and its ending tag should be matched in order <p><b><i> …text… </i></b></p>
Singleton Tags Some tags are not paired: they do not have a matching ending tag For those tags, the closing angle bracket > of the singleton tag is replaced by /> <hr /> produces a horizontal line <br /> continues the text on the next line
1.3 HTML Tag Attributes Some tags have attributes, name=value pairs inside the opening tag The meta tag takes a charset attribute: <meta charset="UTF-8" /> Different tags take different attributes Some are optional and some are required
Creating HTML Documents: Use a Text Editor A text editor is required to create HTML documents Operating systems come with simple text editors installed, which do not include extra information like word processors do Browsers want web pages written in ASCII characters only
Checking Your Work As HTML is written, files should be opened in two applications: A text editor, to make changes A browser, to see the changes made Double-click on the file to open it with the default application (your browser) Right-click and choose Open with to open the file with a text editor instead Compose and Check: After writing a few HTML tags, save the file in the text editor Check the result in the browser by a reload or refresh Repeat
1.4 Using Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) can be used to control the layout and styling of web pages Style specifications that apply to the whole page: Can be placed in a global location inside the <head> Go inside a pair of <style> and </style> tags
Styling Tag Contents with CSS Each tag, like <body>, can be styled <style> body {background-color: black; color: white;} </style> This style declaration results in the background being black, and all text on the page being white
Tips for using <style> Use name of the tag you want to control, without the angle brackets After the element name and inside curly braces { } is the list of property-value pairs, separated by semicolons
<b style="color: red;">text</b> CSS: Inline Styles You can make a styling specification that applies to a tag in only one place by using the style attribute inside that tag: <b style="color: red;">text</b> This will turn the word text red The value of the style attribute is a list of property-value pairs with the same format as the contents of { } in the <style> section.
1.5 Making Links to Other Files Hyperlinks have two parts: The linked text in the current document, which is called the anchor text The address (URL) of the other web page or file, called the hyperlink reference The address of the file is specified in the anchor tag using the href attribute The linked text is contained between the opening and closing anchor tags
Linking with Anchor Tags Begin with <a and follow with a space Add the hyperlink reference using the href attribute href="URL" make sure to include the double quotes Close the anchor tag with the > symbol Add the anchor text, which will become a link when it is displayed by the browser End the hyperlink with the </a> tag <a href="http://google.com">My Google Link</a>
Linking and Embedding Images with Image Tags An image tag specifies a file that contains an image: <img src="filename" alt="description"/> src is the abbreviation for "source" filename is the URL of the image file alt specifies a required alternative form for the image, usually a textual description readable by screenreaders
The file name needs to use the correct file extension, such as .gif Image File Types The file name needs to use the correct file extension, such as .gif .png .jpg
Image Tag Attributes The img tag has width and height attributes, typically given in pixels Use one or the other to resize the image, as using both can stretch the image in unwanted ways if the original ratio of width to height changes <img src="pipe.jpg" alt="Magritte's pipe" width="250" />
Combine an anchor tag with an img tag: Linking Images Combine an anchor tag with an img tag: <a href="history_red_square.html"><img src="red.gif" alt="Red Box"></a> When the page displays, the usual highlighting that links receive (if present) will be used to mark the image as a link
1.6 URLs: Absolute and Relative References In anchor tags for absolute references, the hyperlink reference is a complete URL A reminder that a complete URL is made from: A protocol specification: http:// A domain (or IP address): plato.stanford.edu A path to the file: /entries/russell/
URLs: Relative References Links may refer to other web pages or files on the same site These files will be stored in the same or nearby folders These anchor tags use relative references A relative reference describes how to find the referenced file relative to the file in which the anchor or image tag appears
Relative References and the Directory Hierarchy When the file containing the anchor and the referenced file are in the same folder the file name is used: <a href="coffee.html">Coffee!</a> When the referenced file is “deeper” in the directory, we give the path from the current folder down to the file: <a href="new/morecoffee.html">More Coffee!</a>
Figure 4.8 Directory/File Hierarchy Sample directory (folder) structure for a website
Getting Good References From index.html to: aGift.html, use href="aGift.html" fun.html, use href="lolCat/fun.html" tabby.html, use href=”lolCat/friend/tabby.html"
Moving Up in the Hierarchy To go up to a folder, add ../ (said as "dot dot slash") to the beginning of the relative URL, a convention that originated in the Unix operating system Each ../ moves up one level higher in the hierarchy
Examples of Moving Up From tabby.html to: fun.html, use pic2004.jpg href="../fun.html" pic2004.jpg src="../../../maCat/pic2004.jpg"
1.7 Intermediate Level Tags: Lists and Tables There are two types of lists in HTML: unordered and ordered To make an unordered list, sometimes called a bulleted list: Unordered list tags <ul> and </ul> surround the items of the list The items are enclosed in list item tags, <li> and </li>
A Simple Unordered List <ul> <li>Dogs</li> <li>Cats</li> <li>Elephants</li> </ul>
An Unordered List Example An example of an unordered list: the HTML code is on the left, and the display in a browser on the right.
Ordered Lists Ordered lists use the tags <ol> and </ol> Bullets are replaced with numbers The ordered list behaves the same in the browser as unordered list
A Simple Ordered List <ol> <li>Hotdogs</li> <li>Bratwursts</li> <li>Sausages</li> </ol>
An Ordered List Example An example of an ordered list: the HTML code is on the left, and the display in a browser on the right.
HTML Tables Tables present tabular data, or information that belongs in rows and columns HTML tables have a nested structure of tags: They are enclosed in <table> and </table> Each table row is enclosed in <tr> and </tr> Each cell is surrounded by table data tags, <td> and </td>
Additional Table Tags: Captions Make sure tables have captions and column headings Place caption tags inside the table tags and around the table’s caption, which will be centered at the top of the table Use <caption> and </caption>
Additional Table Tags: Column Headings Column headings are the first row of the table In the “heading” row, replace the <td> and </td> tags with table heading tags: <th> and </th> Column headings will display in bold
Returning to Styling: The CSS Box Model CSS considers every HTML5 element to be enclosed in a “box” These boxes are not visible in the browser, unless you take steps to make them visible Boxes can help us clearly visualize the boundaries of content, padding, border, and margin
Figure 4.9 The Box Model The boxes of the Box Model. Content is enclosed in padding, which is enclosed by a margin. All of these can be controlled.
Controlling The Box The margin and padding are blank space Content and border areas may contain visible material CSS can be used to set the sizes and widths of the boxes Different sides of the boxes can be set separately
Using a Separate CSS File: Global Styling So far, we have placed our style information either in the head section or directly inside the tag If we want to easily have the same style information on multiple pages to have a consistent “look and feel,” we should instead use a separate .css file
Creating and linking a CSS file Transfer your style section of the page into a new text file do not include the style tags, just the style elements Save the file with a .css extension, like global.css Go back to the original .html page and add a link to your .css page inside the head element: <link rel="stylesheet" type="text/css" href="global.css" /> You can use both a separate file and internal style tags if you wish
The "C" in CSS: Cascade Style sources default: comes with the browser external: styling in a .css file style section: defined inside of <style> tags inherited: properties set by enclosing tag tagged: defined with the style attribute These sources are listed in increasing precedence order; that is, tagged will be used over inherited, style section over external, etc.
Leveraging CSS: Adding Classes A class is a family of styling specifications with a common name One example: Styling <h2> elements differently if they are identified as volcanos: <h2 class="volcano"> . . . </h2> In the style definition, we append the class name (scientist) to the tag with a dot: h2.volcano and style it Plain <h2> tags are styled only with those features that apply to all <h2> tags
Figure 4.13 Styling Using the Volcano Class The description list exploiting the class feature to style volcanic sites differently from other sites.
Summary Use HTML tags to: Create a web page Create links with anchor tags using absolute and relative pathnames Embed and link images Create lists and tables Use Cascading Style Sheets to style web documents, including: Creating styles locally (in the HTML) and globally (using a separate .css file) Describing, understanding, and using the CSS Box Model Using CSS classes to style similar items