unit 1 – developing a web page. objectives: learn the history of the web and html describe html...
Post on 26-Dec-2015
217 Views
Preview:
TRANSCRIPT
Unit 1 – Developing a Web Page
Objectives:
Learn the history of the Web and HTML Describe HTML standards and specifications Understand HTML elements and markup tags Understanding HTML Plan and create an HTML document Edit and view an HTML document Link documents to other Web sites Print an HTML document
Create a new folder in your Home Drive
Web Page Design Go to Student/Teacher/Flueso/Web
Page Design Copy Unit 1 folder from my folder to
yours All files will be saved as ‘.htm’ YOU MUST SAVE ALL FILES for one
web site in the SAME folder!
TO DO:
Open Introduction to HMTL and save it to your H:drive
Put your first and last name in the header of the document
Open text to page 1 Read pages 1-7 Fill in the packet through #19
Exploring the History of the World Wide Web
A network is a structure linking computers together for the purpose of sharing information and services
Users typically access a network through a computer called a host or node
A host that provides information or a service is called a server
New Perspectives on HTML and XHTML, 5e 5
Exploring the History of the World Wide Web
A computer or other device that requests services from a server is called a client
If the computers that make up a network are close together (within a single department or building), then the network is referred to as a local area network (LAN)
New Perspectives on HTML and XHTML, 5e 6
Understanding HTML
Internet: worldwide collection of computer networks that links together millions of computers
Network: group of computers that are connected together to share resources and data
Internet Service Provider (ISP): company that has a permanent connection to high speed data lines that connect computers
Structure of the Internet
New Perspectives on HTML and XHTML, 5e 8
Exploring the History of the World Wide Web
Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland laid the foundations for the World Wide Web, or the Web, in 1989
They developed a system of interconnected hypertext documents that allowed their users to easily navigate from one topic to another
The key to hypertext is the use of links, which are the elements in a hypertext document that allow you to jump from one topic or document to another
Exploring the History of the World Wide Web
Web Page: Each document on the World Wide Web Web pages are stored on Web servers computers that
make Web pages available to any device connected to the Internet
A Web browser retrieves the page from the Web server and renders it on the user’s computer or other device
Introducing HTML
A Web page is a text file written in a language called Hypertext Markup Language (HTML)
A markup language is a language that describes a
document’s content and structure HTML is not a programming language or a
formatting language Styles are format descriptions written in a separate
language from HTML that tell browsers how display the content and structure
New Perspectives on HTML and XHTML, 5e 11
The History of HTML
A group of Web developers, programmers, and authors called the World Wide Web Consortium, or the W3C, created a set of standards or specifications that all browser manufacturers were to follow
The W3C has no enforcement power BUT the recommendations of the W3C are
usually followed since a uniform approach to Web page creation is beneficial to everyone
New Perspectives on HTML and XHTML, 5e 12
History of HTML and XHTML
New Perspectives on HTML and XHTML, 5e 13
Uniform Resource Locator (URL): address of a document or other file accessible on the Internet
http://www.yahoo.com HTTP: Hypertext Transfer Protocol FTP: File Transfer Protocol
Hyperlink (link): used to connect one Web page to another Ex) Graphic links, text links, menu bar with
links, animations links
Creating Web Page documents:
Open Application/Accessories Notepad Set Word Wrap to ‘ON’ under the Format menu All Web files will be saved with a name and an extension
in YOUR HOME directory (ex. flueso.htm) Plan out your Web page before you start coding Draw a planning sketch or create a sample document
using a word processor You MUST save all edits before testing and then refresh
the Web page To test Web page: File Menu, Open, Browse/Choose,
Open. (MAY NOT WORK WITH OUR BROWSER)
Creating an HTML Document
In planning, identify a document’s various elements. An element is a distinct object in the document, like
a paragraph, a heading, or a page’s title Tag - The core building block of HTML; marks the
presence of an element A two-sided tag is a tag that contains some
document content General syntax for a two-sided tag:
<element>content</element>
New Perspectives on HTML and XHTML, 5e 16
ELEMENTS:
New Perspectives on HTML and XHTML, 5e 17
Go to Saucon Valley’s home page View HTML/editing/formatting tags PAGE View source
Marking Elements with Tags
A two-sided tag’s opening tag (<p>) and closing tag (</p>) should completely enclose its content
Elements can contain other elements Tags cannot overlap
<p>Welcome to <b>Dave’s Devil Sticks</b></p>
New Perspectives on HTML and XHTML, 5e 19
The Structure of an HTML File
The opening <html> tag marks the start of an HTML document, and the closing </html> tag tells a browser when it has reached the end of that HTML document <html> marks the root element
Anything between these two tags makes up the document content, including all other elements, text, and comments
New Perspectives on HTML and XHTML, 5e 20
The Structure of an HTML File
An HTML document is divided into two main sections: the head and the body
The head element contains information about the document, for example the document title or the keywords
<head> document information </head> The content of the head element is NOT
displayed within the Web page.
New Perspectives on HTML and XHTML, 5e 21
The Structure of an HTML File The body element contains all of the content to
appear on the Web page
The body element can contain code that tells the browser how to render the content. <body> content of web page </body>
The title element contains the page’s title A document’s title is usually displayed in the browser’s title bar. <title> Title of web page </title>
New Perspectives on HTML and XHTML, 5e 22
Starting tags: HTML tags <HTML>
</HTML>
Creates an HTML document
Header tags <HEAD> </HEAD>
Lets you enter special info; this is not displayed
Title tags <TITLE> </TITLE>
Places a short title or description in a browser’s title bar
Body tags <BODY> </BODY>
Encloses the part of your Web doc that will be displayed by the Web browser
Every Web Page: <html> <head> <title> </title> </head> <body> content </body> </html>
Go to page 11-13 Heading and title
Adding Comments
The comment tag adds notes to your HTML code
<!-- comment --> Comments can be spread over several lines Comments are useful in documenting your
HTML code for yourself and others PAGE 13-14
New Perspectives on HTML and XHTML, 5e 25
1.2 Working withBlock-Level Elements
Block-level elements are elements that contain content that is viewed as a distinct block within the Web page
Heading elements are block-level elements that contain the text of main headings on the Web page <hn>content<hn> n is a number between 1 and 6
<h1> is the largest heading <h6> is the smallest heading
New Perspectives on HTML and XHTML, 5e 26
Marking Block-Level Elements
To mark a heading, enter<hn>content</hn>
where n is a number from 1 to 6 and content is the text of heading
To mark a paragraph, enter
<p>content</p> To mark a block quote, enter
<blockquote>content</blockquote> To mark a generic block-level element, enter
<div>content</div>
New Perspectives on HTML and XHTML, 5e 27
Open demo_html.htm Unit 1 / Demo folder
Page 16-17
Adding <h1> and <h2> Markup Tags – pg 17-19
New Perspectives on HTML and XHTML, 5e 29
Marking Paragraph Elements
New Perspectives on HTML and XHTML, 5e 30
White Space and HTML
HTML file documents are composed of text characters and white space
White space is the blank space, tabs, and line breaks within the file
HTML treats each occurrence of white space as a single blank space
You can use white space to make your document more readable in the creation phase
Page 20 – demo_html.htm
New Perspectives on HTML and XHTML, 5e 31
Marking a Block Quote
The syntax for making an extended quote is <blockquote>content</blockquote>
PAGE 21
New Perspectives on HTML and XHTML, 5e 32
Marking a List
HTML supports three kinds of lists: ordered, unordered, and definition
Ordered list for items that must appear in a numerical order
Unordered list for items that do not need to occur in any special order
Definition list contains a list of terms, each followed by the term’s description
Nested list: One list can contain another list
New Perspectives on HTML and XHTML, 5e 33
Marking a List – pg 22-26
New Perspectives on HTML and XHTML, 5e 34
Using Other Block-Level Elements
address element contact information. <address>content</address> PAGE 27
New Perspectives on HTML and XHTML, 5e 35
Using Other Block-Level Elements
New Perspectives on HTML and XHTML, 5e 36
Working with Inline Elements
An inline element marks a section of text within a block-level element
Often used to format characters and words Also referred to as character formatting
elements
New Perspectives on HTML and XHTML, 5e 37
Working with Inline Elements
New Perspectives on HTML and XHTML, 5e 38
Working with Inline Elements
PAGE 30-31
Using the Generic Elements: div and span
Div – used to mark general block-level content <div>content</div>
Span – used to mark general inline content <span>content</span> <span color: teal> content </span>
Both can be used to represent a text block or string of inline text without having any other meaning You can completely control the appearance of the content
through the use of styles
Using Element Attributes
Many tags contain attributes that control the use, behavior, and appearance of elements in the document
Attributes are inserted within the tag brackets
<element attribute1=“value1” attribute2=“value2”> content</element>
*Attribute names should be entered in lowercase letters
*Attribute values should be enclosed within single or double quotation marks
New Perspectives on HTML and XHTML, 5e 41
The Style Attribute
Use the style attribute to control the appearance of an element
text-align style tells the browser how to horizontally align the contents of an element
color style tells the browser to display the text in a certain color
New Perspectives on HTML and XHTML, 5e 42
The Style Attribute
New Perspectives on HTML and XHTML, 5e 43
The Style Attribute – pg 35-36
New Perspectives on HTML and XHTML, 5e 44
OPEN COLOR DEMO
Working with Empty Elements An empty element contains no content Empty elements appear in code as one-sided
tags <element />
The one-sided tag to mark a line break is <br /> Need to be placed within block-level elements
The horizontal rule element places a horizontal line across the Web page <hr />
PAGE 37-40
New Perspectives on HTML and XHTML, 5e 46
Working with Empty Elements
To display a graphic, you insert an inline image into the page
An inline image displays a graphic image located in a separate file within the page <img src="file" alt="text" />
PAGE 41
New Perspectives on HTML and XHTML, 5e 47
Working with Character Sets and Special Characters
Character sets come in a wide variety of sizes, based on the number of symbols required for communication in the chosen Language ASCII (American Standard Code for Information Interchange) UTF-8 – compressed version of Unicode (default character
set for our browser) Over 65,000 symbols
New Perspectives on HTML and XHTML, 5e 48
Working with Character Sets and Special Characters
New Perspectives on HTML and XHTML, 5e 49
Working with Character Sets and Special Characters
Page 44-47 More in Appendix B
New Perspectives on HTML and XHTML, 5e 50
Summary Create a basic Web page using HTML Concepts and history surrounding networks and the
development of the World Wide Web History of HTML Creation of a simple Web age Block-level elements Inline elements Element attributes Character sets and special character symbols
New Perspectives on HTML and XHTML, 5e 51
To do…
Review Questions - handout Review Assignment, pg 50-52 Case Problem 1, 2, 3 – pg 52-58
My Web Page
MOST COMMON image formats Jpeg and gif
For your own web site: Find pictures on the web or bring in your
own pictures SAVE EVERYTHING in a folder called
LastNameWebSite
top related