Download presentation
Presentation is loading. Please wait.
1
Extended Learning Module F
Building a Web Page with HTML
2
STUDENT LEARNING OUTCOMES
Define an HTML document and describe its relationship to a Web site. Describe the purpose of tags in hypertext markup language (HTML). Identify the two major sections in an HTML document and describe the content within each.
3
STUDENT LEARNING OUTCOMES
Describe the use of basic formatting tags and heading tags. Describe how to adjust text color and size in a Web site. Describe how to change the background of a Web site.
4
STUDENT LEARNING OUTCOMES
List the three types of links in a Web site and describe their purposes. Describe how to insert and manipulate images in a Web site. Demonstrate how to insert lists in a Web site.
5
INTRODUCTION Building a content-only Web page is easy
Everyone is doing it for a variety of reasons Family Web site Evening sports league team School classes (by your instructors)
6
INTRODUCTION A word of caution when building a personal Web site
Don’t include too much personal information Don’t include (as a general rule) Your address Your phone number Your unique IDs
7
MODULE ORGANIZATION Hypertext Markup Language (HTML)
Learning Outcomes #1, #2, #3 Basic Text Formatting Learning Outcome #4 Creating Headings Adjusting Text Color Learning Outcome #5 Adjusting Text Size
8
MODULE ORGANIZATION Changing the Background Color
Learning Outcome #6 Adding Links to a Web Site Learning Outcome #7 Adding Images Learning Outcome #8 Using a Textured Background Creating and Using Lists Learning Outcome #9
9
HYPERTEXT MARKUP LANGUAGE (HTML)
HTML – the language you use to create a Web site HTML allows you to Specify the content Specify the formatting for content
10
HYPERTEXT MARKUP LANGUAGE (HTML)
To create a Web site, you must create an HTML document HTML document – file that contains your Web site content and the HTML formatting instructions Web page is a view of an HTML document from within a Web browser
11
Creating an HTML Document
Use any text editor Our choice is Notepad Click on Start Point at All Programs Point at Accessories Click on Notepad Create HTML document and save with htm or html extension
12
HTML Document Sections
HTML tag – specifies the formatting and presentation of information in a Web site Structure tags – HTML tags that set up the necessary sections Two major sections in an HTML document Head section Body section
13
HTML Document Sections
Body section Structure tags
14
HTML Tags Usually are <tagname> and </tagname>
Entire HTML document <html> <head> </head> <body> </body> </html>
15
HTML Document
16
Resulting Web Page Image Lists
17
Working Locally For all to see, Web site must be in Web space
Web space – storage area where you keep your Web site While building… Keep local on your computer Use browser to view
18
Working Locally To view a local Web site in Internet Explorer
Click on File and Open Click on Browser Choose folder and HTML document name Click on Open and OK
19
BASIC TEXT FORMATTING Basic formatting tags – HTML tags that allow you specify formatting for text Strong (bold) - <strong> and </strong> Underline - <u> and </u> Emphasis (italics) - <em> and </em> Line break - <br> Horizontal rule - <hr>
20
Many different basic formatting tags
BASIC TEXT FORMATTING Many different basic formatting tags
21
BASIC TEXT FORMATTING
22
CREATING HEADINGS Heading tags – make certain information, such as titles, stand out <hnumber> and </hnumber>, where number is from 1 to 6 <h1> and </h1> - largest <h6> and </h6> - smallest
23
CREATING HEADINGS Heading tags
24
CREATING HEADINGS
25
ADJUSTING TEXT COLOR Default text color is black, can be changed
<font color=“color name”> and </font> Example I like the color <font color=“blue”>blue</font>. Reads as… I like the color blue.
26
ADJUSTING TEXT COLOR Font colors
27
ADJUSTING TEXT COLOR
28
ADJUSTING TEXT SIZE Default is usually 3; can be changed
<font size=“font size”> and </font> Example <font size=“10”>A</font>stronomy is fun Reads as… Astronomy is fun.
29
ADJUSTING TEXT SIZE Font sizes
30
ADJUSTING TEXT SIZE
31
CHANGING BACKGROUND COLOR
Default is white; can be changed <body bgcolor=“color name”> with no ending tag Example <body bgcolor=“green”> Changes background color to green
32
CHANGING BACKGROUND COLOR
Change background to green
33
ADDING LINKS TO A WEB SITE
Link (hyperlink) – clickable text or image that takes you to another site or page Three types Links to other Web pages or sites Links to downloadable files Links to
34
ADDING LINKS TO A WEB SITE
Format of a link tag is… <a href=“address/filename”>screen text</a> Example To provide a link to MTV’s Web site <a href=“ MTV</a> Displays as Visit MTV
35
ADDING LINKS TO A WEB SITE
Link to another site or page
36
ADDING LINKS TO A WEB SITE
Links usually appear blue and underlined
37
ADDING LINKS TO A WEB SITE
For a downloadable file Replace Web site address with file name Example <a href=“workbook1.xls”>My Excel Workbook</a> Displays as My Excel Workbook Lets someone download your Excel workbook
38
ADDING LINKS TO A WEB SITE
For a link to Replace address/filename with mailto: and your address Example <a me</a> Displays as me
39
ADDING LINKS TO A WEB SITE
Link to downloadable file Link to
40
ADDING LINKS TO A WEB SITE
41
ADDING IMAGES Images can be useful or worthless To insert an image
<img src=“filename.extension”> Image file must be in Web space Is usually jpg or gif format Cannot use bmp file formats
42
ADDING IMAGES
43
ADDING IMAGES
44
Adjusting Image Sizes Can adjust image size with height and width parameters Provide sizing in pixel count Example <img src=“indy.jpg” height=100 width=100> Size would be approximately 1.5 inches square
45
Adjusting Image Position
Can adjust location; default is left; use align parameter align=“right” is right justified <center><img src…></center> is centered
46
ADDING IMAGES
47
ADDING IMAGES
48
USING A TEXTURED BACKGROUND
Can use an image as background Browser will “tile” image to fill page <body background=“filename.extension”> File must be in Web space
49
USING A TEXTURED BACKGROUND
50
CREATING AND USING LISTS
Lists can be Numbered Unnumbered (bulleted) Format is (for numbered) <ol> <li>list content </ol>
51
CREATING AND USING LISTS
For unnumbered or bulleted list, replace “o” with “u” Format is (for unnumbered) <ul> <li>list content </ul>
52
CREATING AND USING LISTS
List tags
53
CREATING AND USING LISTS
Similar presentations
