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, 5e5

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, 5e6

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, 5e8

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, 5e11

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, 5e12

History of HTML and XHTML New Perspectives on HTML and XHTML, 5e13

 Uniform Resource Locator (URL): address of a document or other file accessible on the Internet   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: content New Perspectives on HTML and XHTML, 5e16

ELEMENTS: New Perspectives on HTML and XHTML, 5e17

 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 ( ) and closing tag ( ) should completely enclose its content  Elements can contain other elements Tags cannot overlap Welcome to Dave’s Devil Sticks New Perspectives on HTML and XHTML, 5e19

The Structure of an HTML File  The opening tag marks the start of an HTML document, and the closing tag tells a browser when it has reached the end of that HTML document 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, 5e20

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  document information  The content of the head element is NOT displayed within the Web page. New Perspectives on HTML and XHTML, 5e21

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. content of web page  The title element contains the page’s title A document’s title is usually displayed in the browser’s title bar. Title of web page New Perspectives on HTML and XHTML, 5e22

Starting tags: HTML tags Creates an HTML document Header tags Lets you enter special info; this is not displayed Title tags Places a short title or description in a browser’s title bar Body tags Encloses the part of your Web doc that will be displayed by the Web browser

 Every Web Page: content  Go to page Heading and title

Adding Comments  The comment tag adds notes to your HTML code  Comments can be spread over several lines  Comments are useful in documenting your HTML code for yourself and others  PAGE New Perspectives on HTML and XHTML, 5e25

1.2 Working with Block-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 content n is a number between 1 and 6  is the largest heading  is the smallest heading New Perspectives on HTML and XHTML, 5e26

Marking Block-Level Elements  To mark a heading, enter content where n is a number from 1 to 6 and content is the text of heading  To mark a paragraph, enter content  To mark a block quote, enter content  To mark a generic block-level element, enter content New Perspectives on HTML and XHTML, 5e27

 Open demo_html.htm Unit 1 / Demo folder  Page 16-17

Adding and Markup Tags – pg New Perspectives on HTML and XHTML, 5e29

Marking Paragraph Elements New Perspectives on HTML and XHTML, 5e30

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, 5e31

Marking a Block Quote  The syntax for making an extended quote is content  PAGE 21 New Perspectives on HTML and XHTML, 5e32

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, 5e33

Marking a List – pg New Perspectives on HTML and XHTML, 5e34

Using Other Block-Level Elements  address element  contact information.  content  PAGE 27 New Perspectives on HTML and XHTML, 5e35

Using Other Block-Level Elements New Perspectives on HTML and XHTML, 5e36

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, 5e37

Working with Inline Elements New Perspectives on HTML and XHTML, 5e38

Working with Inline Elements  PAGE 30-31

Using the Generic Elements: div and span  Div – used to mark general block-level content content  Span – used to mark general inline content content  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 content *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, 5e41

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, 5e42

The Style Attribute New Perspectives on HTML and XHTML, 5e43

The Style Attribute – pg New Perspectives on HTML and XHTML, 5e44

OPEN COLOR DEMO

Working with Empty Elements  An empty element contains no content  Empty elements appear in code as one-sided tags  The one-sided tag to mark a line break is Need to be placed within block-level elements  The horizontal rule element places a horizontal line across the Web page  PAGE New Perspectives on HTML and XHTML, 5e46

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  PAGE 41 New Perspectives on HTML and XHTML, 5e47

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, 5e48

Working with Character Sets and Special Characters New Perspectives on HTML and XHTML, 5e49

Working with Character Sets and Special Characters  Page  More in Appendix B New Perspectives on HTML and XHTML, 5e50

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, 5e51

To do…  Review Questions - handout  Review Assignment, pg  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