CSCE 101. Creating Web Pages with HTML5 Applying style with CSS

Size: px

Start display at page:

Download "CSCE 101. Creating Web Pages with HTML5 Applying style with CSS"

Earl Thomas
5 years ago
Views:

1 CSCE 101 Creating Web Pages with HTML5 Applying style with CSS

2 Table of Contents Introduction... 1 Required HTML Tags... 1 Comments... 2 The Heading Tags... 2 The Paragraph Tag... 2 The Break Tag... 3 Creating Hyperlinks... 3 Creating Links... 3 Adding Images and Photographs to Web Pages... 3 Saving Images from the Web to Your Own Directory... 4 Placing Images on Your Web Page... 4 Changing the Size of the Image... 4 Resizing an Image by the Percentage of the Browser Window it Occupies... 4 Resizing an Image by Specifying its Dimensions in Pixels... 5 More about the Break Tag... 5 Image Captions... 5 Images as Links... 5 Creating Lists... 5 Unordered Lists and Bulleted Lists... 5 Ordered Lists and Numbered Lists... 6 Nested Lists... 6 Definition or Description Lists... 7 Cascading Style Sheets (CSS)... 8 Text Formatting Attributes... 8 Background properties... 9 List Attributes CSS Classes... 11

3 Introduction The HyperText Markup Language (HTML) is a language comprised of a series of coded tags that describe the structure of a document. The idea is that most documents have common elements, such as titles, paragraphs, etc. Because HTML is a markup language, you begin with the text of your page and add special tags around words and paragraphs. These tags indicate different parts of a page and produce different effects in the Web browser. HTML tags are the codes inside brackets (< >) that indicate the features of the page. A text editor can be used to create and edit HTML documents. You can see the HTML code of any Web page by choosing View > Source from the browser's menu bar. An HTML element is the opening tag, the closing tag and all text and tags in between. HTML tags are not case sensitive. With all that is being put on the Web it will take a long time before most of the HTML on the Web is standardized. There has been a big push towards HTML5 despite the fact that it has not been fully standardized yet. Most HTML tags require a corresponding closing tag. The tags can be on the same line with the text or on a line by themselves. When the Enter key is used in the text editor to move to the next line, a new-line character is created which is ignored by HTML. Since extra spaces and blank lines are ignored in HTML, use them to line up the opening and closing tags and to make your code easy to read so you can find errors. HTML does not produce error messages, as programming languages do. Many of the HTML tags can contain attributes. The attributes are listed inside the brackets with their values, <ElementName AttributeName = AttributeValue >. According to the standards, attribute values should be enclosed in quotes. The corresponding closing tag must not contain attributes. The list of attribute names with their associated values can appear in any order with in the opening tag. Each HTML tag has a default interpretation in terms of its display properties, which may slightly differ from one browser to the next. Attributes are used to change these default display properties and customize them. The structure of the web page is determined by the HTML. The presentation is determined using cascading style sheets (CSS). CSS allows for efficient and flexible customization of HTML documents to maintain a uniform look and feel for multiple Web pages. Required HTML Tags There are three tags that are used to describe the overall structure of a page and provide simple header information. These are <html>, <head>, and <body>. Let's explore each of these. <html> - is the first structural tag in every HTML page. Your HTML page must begin (after the!doctype) with this tag and end with </html>. The same tag with a backslash in front of it indicates to the browser that this particular section has concluded. The HTML document will have one head and one body. <head> - The head element (the lines between the opening tag and the closing tag) are the prologue to the rest of the file. Title tags are placed inside the head tags as shown in the example below. The text between the title tags is the title of the Web page and will appear in the title bar of the browser window. Remember to close the head with </head>. <body> - contains the remainder of your HTML page, which includes text, links, image tags, etc. Most of the important elements of the page are placed between <body> and </body>. You should have only one pair of opening and ending body tags. <!DOCTYPE html> The!doctype comes first, before the opening HTML tag and tells the browser what version of html is being used. 1

4 <!DOCTYPE html> <html> <head> <title> insert the title here </title> </head> Every basic HTML page, therefore, looks like the following code segment: <!DOCTYPE html> <html> <head> <title> This is a simple HTML page </title> </head> <body>... rest of HTML page code including text and tags... </body> </html> Comments Comments are used to provide information for people who are looking at the code, to block part of a web page from showing or to aid in debugging. Comments are ignored by the browser and will not show on the screen. Everything between the opening  is ignored by the browser.  The Heading Tags Inside the body, you may want to separate your text into headings and paragraphs. The elements used for headings are <h1> through <h6>, with <h1> the largest and <h6> the smallest. The largest can be used for headlines, and the smaller headings can be used for the copyright information at the bottom of a Web page. These all have corresponding closing tags. Here is an example of how to apply a heading tag to a text segment. 2 <h1> This is text is a large (h1) heading. </h1> The Paragraph Tag The paragraph element is specified with <p>. Although the corresponding </p> tag is optional in the early versions of HTML, it is required in the newer versions and should be used. The paragraph tag forces the text following the tag to drop down and leave a blank space, slightly larger than a blank line, creating a new paragraph. When consecutive paragraph tags are used, most browsers ignore all but the first. The <p> tag can appear anywhere in the text within the body element. The following examples produce the same results. Example 1: <html> <head><title> Paragraph Example </title></head> <body> <p>this is the first paragraph.</p> <p> This text begins a new paragraph.</p> <p> This text begins paragraph three. </p> </body> </html>

5 Example 2: The Break Tag <html><head><title> Paragraph Example </title></head> <body><p>this is the first paragraph. </p><p>this text begins a new paragraph.</p> <p> This text begins paragraph three. </p> </body></html> The break tag, <br>, forces a line break. This tag is considered an empty tag, meaning that this element does not have a closing tag. Instead, the tag is self contained and is just the <tag> portion of an element. Note that the HTML5 version of an empty tag is different from the older XHTML style which included a slash in the opening tag. Use two consecutive break tags to create a blank line. Creating Hyperlinks To link to a site on the web, an anchor tag, <a> with the href attribute set to the URL of the new location, is used. The text between the opening anchor tag and the closing tag will become the hyperlink (clickable text). The user can click the place on the screen where the cursor turns into a hand, and a new screen will appear in the browser window. See the example below: <a href=" CSE Dept. at USC</a> This example opens the web page for the Department of Computer Science and Engineering at USC in the current browser window. The phrase, CSE Dept. at USC, will be a different color (default is blue) to show the viewer that it is a link. To create your own links, simply replace the URL, with the URL of the site of your choice, and replace CSE Dept. at USC with appropriate text. Remember to follow the text with the closing anchor tag </a>. The quotation marks around the URL and the protocol portion of the URL (i.e. are required in the new standards. To link to other pages you have created, insert the file name of the file you are linking to in place of a URL. <a href = "mydog.html">more about my dog</a> If you click on "More about my dog" on your Web page, it will load the page mydog.html into the current browser window. The files for the main HTML page and the one you are linking to must both be stored in the same folder in your workspace; otherwise you will have to specify the file path. Keep your filenames short, and always use the underscore character instead of a space. Creating Links links are identical to hyperlinks except that the filename or URL is replaced by the address you wish to send mail to preceded by the command mailto:. This is inconvenient to people who use webmail and do not have an client on their computer. <a href= mailto:johndoe@cse.sc.edu > Me</a> Adding Images and Photographs to Web Pages Web pages would not be very interesting if they contained only text files and hyperlinks. The web is a multimedia world, and you can add images to your Web pages. This is not hard to accomplish. We can save 3

6 images directly from other web pages, we can create them from our own photographs by scanning them with a digital scanner, or we can use images taken with a digital camera. Saving Images from the Web to Your Own Directory You may search the Web for images and save them in your directory. When you have found an image that you want to use, move the cursor over the image. Press the right mouse button, and hold it down. A menu will appear. Choose the option Save Image As. Give the image a filename but do not change the file type, and save it in your directory together with your other web page documents. You can later refer to it in your HTML code by its filename using the image element. Be aware that images on the web are under copyright and cannot be used by students except in school assignments. If you find an image that you would like to use on your own commercial web site, you would first have to get permission from the authors of the original web page. However, the doctrine of fair use allows students to quote limited amounts of text from books for use in term papers, so long as the students give credit with footnotes or other references. Similarly you can use a few images from web sites of others if this is a class assignment and you reference their sources on your page. Be sure to list the web site where the original was found somewhere on your web page. Web images from any governmental agency such as the White House, NASA, or the South Carolina State government are usually in the public domain, and you can use them without infringement of copyright. Nevertheless, give the reference on your page. If you complete your web pages for the class and later store them on another general web domain, make sure that you have not included any copyrighted materials. The concept of fair use applies to school work only. Note: The web pages created for this class are not actually on the web. Placing Images on Your Web Page To place an image on your web page, use the image element, <img>. You will also need to include two attributes; the source and the alternate attribute. The source attribute or src allows you to designate which file and where the file is located and the alternate or alt attribute allows you to designate what is displayed if the image cannot be shown. A full image element should look like the following: <img src="filename" alt= file >. The following element <img src="mydog.gif" alt= dog > will cause the image mydog.gif to be loaded on the page. You must specify the path name if the file is not in the same directory as the HTML file(s) linking to it. File names are case sensitive and must be typed exactly as listed in the directory. Changing the Size of the Image The attributes height and width can be used to change the height and width of the image either by specifying the percentage of the browser it should occupy or by specifying the exact dimensions in pixels. If an image is enlarged too much or stretched too far in one direction, it will appear distorted. You can also resize an image in Photoshop or Paint. Resizing an Image by the Percentage of the Browser Window it Occupies The height and width attributes can be set to a percentage of the browser window size as shown in the example below. As the window is resized by dragging the edge with the mouse, the image will change size proportionally. In the example: <img src="blacklab.jpg" alt= lab pic height="50%" width="50%"> the size of the image in the BlackLab.jpg file will be displayed as half of the browser window's length and width and will change as the window size changes. NOTE: If you used a space before the percent sign and omitted the quotation marks, the code would not work. The quotation marks, although required in the standards, are not actually necessary in the older 4

7 HTML unless the attribute value contains a space. We are using HTML5 so always enclose attribute values in quotation marks. <img src="blacklab.jpg" alt= lab pic height="50%" width="50%"> Resizing an Image by Specifying its Dimensions in Pixels The height and width attributes can also be set to the height and width of an image in pixels. A pixel, taken from the words "picture element," is the smallest unit on the screen that is capable of changing color. When the value of the height and width attributes are given in numbers without percent signs, the numbers represent number of pixels. In the example: <img src="blacklab.jpg" alt= lab pic height="50" width="60"> the image displayed from the file BlackLab.jpg will be quite small, 60 pixels across and 50 pixels down. You may want a much larger image, width="350" height="250", or even larger. Since you have specified the exact number of pixels, resizing the browser window will not change the image size. Experiment with both sizing methods to determine what size image looks best on your Web page. To align an image see CSS. (The align attribute is no longer in use.) More about the Break Tag The <br> tag forces the text line to drop down a line and continue on the left edge of the window or the right edge of a left-justified image. It can be used to position text or images. To position images diagonally down the page, use break tags between the image tags. The break tag can also be used to keep from placing images on top of each other. Image Captions Use headings element for image captions. Images as Links To use an image as a link, place the image tag, instead of text, between the opening and closing anchor tags, as shown in the examples below. <a href=" <img src="shuttle.gif" alt= shuttle pic > </a> Creating Lists Bulleted lists and numbered lists can be displayed on your web page using the list tags. Lists can contain text, images, and hyperlinks. Since HTML ignores multiple spaces, use spaces to line the tags up so that the code is easy to read and you can quickly find a missing closing tag. Unordered Lists and Bulleted Lists An unordered list in HTML creates a bulleted list. The list item tag, <li>, is used in front of each item in the list. Include the closing </li> tag to conform to the standards. The items are surrounded by the opening and closing unordered list tags, <ul>... </ul>. <h3>large cities in the US</h3> <ul> <li> Atlanta </li> 5

8 <li> Chicago </li> <li> Houston </li> <li> Los Angeles </li> <li> Miami </li> <li> New York City </li> </ul> The result in the browser will appear as follows: Large cities in the US Atlanta Chicago Houston Los Angeles Miami New York City Ordered Lists and Numbered Lists An ordered list in HTML creates a numbered list. The list item tag, <li>, is used in front of each item in the list. The items are surrounded by the opening and closing ordered list tags, <ol >... </ol>. <ol> Largest cities in the US <li> New York City </li> <li> Los Angeles </li> <li> Chicago </li> <li> Houston </li> <li> Atlanta </li> <li> Miami </li> </ol> The browser result will be as follows: Largest cities in the US 1. New York City 2. Los Angeles 3. Chicago 4. Houston 5. Atlanta 6. Miami Nested Lists Lists can be nested to create outlines by putting an ordered list tag, <ol>, or an unordered list tag, <ul>, after a list item, followed by the sublist items and the appropriate closing list tag (</ol> or </ul>). The browser will use different shaped bullets depending on the level of nesting. In the example below an unordered list is nested below each item of the ordered list. <h3> Large cities in the US</h3> <ol> <li>new York City <ul> <li>1990 population-19,549,649 </li> 6

9 </li> <li>los Angeles </li> </ul> <ul> </ul> <li>2000 population-21,199,865 </li> <li>1990 population-14,531,529 </li> <li>2000 population-16,373,645 </li> </ol> <li>chicago </li> <ul> </ul> <li>1990 population-8,239,820 </li> <li>2000 population-9,157,540 </li> The following will be the result in the browser window: Large cities in the US 1. New York City 1990 population-19,549, population-21,199, Los Angeles 1990 population-14,531, population-16,373, Chicago 1990 population-8,239, population-9,157,540 Definition or Description Lists Definition or Description lists are intended for creating lists of terms and their respective definitions. There are three elements used in constructing definition lists: <dl>, <dt>, <dd>. Each term is surrounded by the <dt> </dt> tags and followed by the term s definition, which is surrounded by the <dd> </dd> tags. The <dl> and </dl> tags are used to begin and end the definition list respectively. <dl> </dl> <dt> HTML</dt> <dd> Hyper Text Markup Language</dd> <dt>css </dt> <dd>cascading Style Sheet</dd> The following will be the result in the browser window: HTML Hyper Text Markup Language CSS Cascading Style Sheets 7

10 Cascading Style Sheets (CSS) Now that we have become familiar with numerous HTML tags, let s learn to customize their display properties. HTML elements, such as paragraphs and headings, are displayed in web browsers in certain default ways. For example, paragraph text is typically displayed as black, 12pt, Times New Roman font. When developing web pages, we typically want to incorporate different colors, styles, and display properties that enhance the visual appeal of our pages. We may choose to incorporate fancier font types, an attractive color scheme, or a specific content layout. Cascading style sheets provide an efficient means for incorporating such display customizations. In this course we will focus on internal style sheets. The internal style sheet of an HTML document is enclosed between the <style> and </style> tags in the head section of the document. (The type attributes is no longer needed in HTML5.)The style sheet contains property settings for elements for which you wish to modify the display properties. The syntax for element definitions in a style sheet is as follows: Element name { Property name : Property value(s); You are not limited to one attribute per element. You may customize any properties that relate to the element. For example, the following is a style definition for the paragraph element. p { color: red; font-size: 12pt; font-family: Times New Roman ; font-weight: bold; text-decoration: underline; There are many different properties and corresponding values that may be set using style sheets. We will focus on a small subset of these properties appropriate for the scope of this course. There are resources on the web that you may consult for additional properties if you wish to learn more about style sheets. The properties covered in this handout are categorized based on their purpose. The following example illustrates the placement of the internal style sheet within an HTML document. <html> <head> <style> body { background-color: red p { background-color: yellow; Internal Style Sheet </style> </head> <body> rest of the code Text Formatting Attributes 8

11 You may use the text formatting attributes for customizing any HTML element that could incorporate text such as the body, paragraphs, and headings. font-family: This attribute is used to set the font type. By default, text appears in Times New Roman on most browsers. You may set this attribute to other font names. Note that the way some fonts are displayed on the browsers may not be very appealing. Test the fonts you wish to use by viewing them on the browser and try to use common fonts. If the font name contains a space enclose the name in quotation marks. font-size: This property is used to set the font size. By default the text is displayed in 12-point font on most browsers. However, other settings, such as the Text Size property of the browser, factor into how large the text appears on the screen. To set the size of the font, assign the point value you want. For example, use 14pt to indicate 14-point font. You may also set the size to a percentage of the normal font size. For example, use 50% to display the font as half of the size of the normal (default) font size. Finally, the font-size property can be set to one of the following xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large. font-style: This property is used to set the style of the font. You may use the values italic, normal, or oblique for this property. font-weight: This property is used to set the weight (thickness) of the font. Common values for this property are bold, light, bolder, lighter, or normal. text-decoration: You may add decoration to text by using this property which can have values none, underline, overline, line-through, or blink. color: To set the color of the text, assign values such as the name of a color (e.g. red) or the hexadecimal representation of the color (e.g. #767676) to this properties. There are many resources on the Web that provide browser compatible color names as well as hexadecimal color codes. Refer to your class Web site for some of these resources. When setting the color of the text for your Web pages, be sure to view them on a browser to see how they appear to viewers. Pick colors that are easily readable and visible on your pages background colors or images. text-align: You may align text within a Web page element (e.g. paragraph, header, etc.) by setting this property to the desired type of alignment. The possible values for this property are left, right, center, and justify. Background properties background-color: This property sets the background color of an HTML element. You may use this attribute with the body and paragraph tags. For example, setting the background color for the body tag determines the background color that will fill the browser window when displaying the Web page. The possible values for this attribute are the same as those for the color attribute. background-image: Use this property if you wish to set an image as the background of an element. The value for this attribute is url(----), where the dashes should be replaced by the name of the image file (including the file extension). By default the image will be tiled in the background of the element. The background-repeat attribute discussed below will help in setting the manner in which the background image is displayed. background-repeat: This property sets if and how the background image is to be repeated within the element. The possible values for this attribute are repeat, repeat-x, repeat-y, or no-repeat. The first value is analogous to the default tiled setting. Repeat-x, repeats the background image along the x-axis (horizontal) direction only while repeat-y does the same but along the y-axis (vertical) instead. Norepeat simply places one copy of the image on the page without any repetition in the background. The 9

12 final display of the background image not only depends on its repeat attribute but also where we position the image relative to the element. For example, if we place it on the top left of the element, then a repeat-y will result in tiling the image along the left edge of the element. If we place it on the top right, repeat-y will result in tiling the image along the right edge of the element instead. To set the position of the background image relative to the element use the background-position attribute discussed below. background-position: This property sets the starting position of the background image with respect to the element. Possible values for this property are top left, top center, top right, center left, center center, center right, bottom left, bottom center, and bottom right. Note that each value has two keywords; the first for setting the vertical position and the second for setting the horizontal position of the image within the element. p { background-image: url(pic1.jpg); background-repeat: repeat-y; background-position: top left; background-color: yellow; pic1.jpg is the image file representing a single light bulb as shown below. Using the paragraph tag in the HTML file will result in the following display in the browser window: Hyperlink The paragraph Attributes text appears here. The background color is yellow. The image tiling is repeated until the end of the paragraph. By default, any hyperlinks you insert into your web pages will appear in blue changing to purple when activated. Depending on your background color or image, these default colors may not be easily readable on your page. Style sheets allow for customizing the display properties of hyperlinks in their various states: link (unvisited links), hover (mouse over links), visited (previously visited links), and active (when clicked). To set the properties for each of these states use the syntax below. Note:There cannot be a space on either side of the colon. a:state { Property name: Property Value(s); You may use both text formatting and background attributes for customizing links. a:link { color: red; background-color: yellow; text-decoration: underline; font-size: 12pt; font-family: Arial; Any unvisited link on your Web page will appear as follows: USC 10

13 List Attributes list-style: This property controls the style of the bullets in ordered or unordered list. It is incorporated into the style definition of the ul and ol tags. For unordered lists, you may use the values circle, square, or disk. For ordered lists, the possible values are: decimal (displays numbers 1,2,3, ), upper-alpha (displays uppercase letters A, B, C, ), lower-alpha (displays lowercase letters a, b, c, ), upperroman (displays Roman numerals I, II, III, ), and lower-roman (displays Roman numerals I, ii, iii, ). You may also use an image as bullets by using the option url(---). The dash should be replaced by the image filename. ul { list-style: url(pic1.jpg); Where pic1.jpg ( sample list below. ) is the image to be used as the bullet for unordered lists as shown in the CSS Classes 11 History Biology Sociology Often, you may want to give an HTML element multiple looks within the same web page. For example, you may want the first paragraph of your Web page to be blue, 10pt, Arial font but the second paragraph to be red, 12pt, Garamond font. CSS allows for efficient customization of HTML elements with the use of classes. Using CSS classes entails adding simple extensions to the tag definitions we have already discussed. For example, suppose that we want to create two paragraph styles called intro and summary. In order to do so, we add the following definitions to the internal style sheet. p.intro { color: blue; font-size: 10pt; font-family: Arial; p.summary { color: red; font-size: 12pt; font-family: Garamond; To use the two styles created, we simply incorporate their class names in the paragraph tags of HTML documents as shown in the following example. <p class= intro >This is a paragraph that displays the properties of the p.intro class.</p> <p class= summary >This is a paragraph that displays the properties of the p.summary class.</p> <p>this is a normal paragraph. No styles applied. </p> The three paragraphs will appear in the browser as follows: This is a paragraph that displays the attributes of the p.intro class.

14 This is a paragraph that displays the attributes of the p.summary class. This is a normal paragraph. No styles applied. CSS also allows for creating generic classes that can be used with multiple HTML elements. For example, suppose that we want to create a class called red_c which sets the color attribute of an HTML element to red. So, our style definition would be:.red_c {color: red; Note that there is a period before the class name. This class can now be used with any HTML element that has color properties. <h1 class= red_c >Red Header</h1> <p class= red_c >This paragraph text is red.</p> This HTML code will appear in the browser as follows: Red Header This paragraph text is red. 12

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language