1 / 19

Creating a Simple Page: HTML Overview

Learning Web Design: Chapter 4. Creating a Simple Page: HTML Overview. HTML. Hypertext Markup Language (HTML) Uses tags to tell the browser the start and end of a certain kind of formatting Most tags use this method: <> - the start tag </> - the end tag

fkline
Download Presentation

Creating a Simple Page: HTML Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Learning Web Design: Chapter 4 Creating a Simple Page: HTML Overview

  2. HTML • Hypertext Markup Language (HTML) • Uses tags to tell the browser the start and end of a certain kind of formatting • Most tags use this method: • <> - the start tag • </> - the end tag • HTML uses common sense names for tags • <p> paragraph, <body> body, <title> title

  3. A Brief History of HTML • The base set of tags is referred to as HTML 2.0 • Standard set by the W3C • Set of tags all browsers must support • In 1996, HTML 3.2 specification created by group of vendors and W3C • Includes tables, applets, text flow around images • Backward compatible with HTML 2.0 • In 1997, HTML 4.0 incorporated: • DHTML, Cascading Style Sheets and Frames

  4. Preparing for the Future • New Web technologies do not handle the older versions of HTML • The new HTML Standard is HTML5, • This standard is known as HTML 5 • Similar to XHTML 1.0 • Additional rules needed to make code compliant

  5. HTML Describes the Page Structure • Documents have common elements: • Lists • Paragraphs • Titles • Headings • Tables • HTML also defines character styles like bold and italicize • Each element has a name and is contained in a tag

  6. HTML Does not Describe Page Layout • HTML doesn’t set how a page will look when viewed • Some browsers might use different default styles than others • As a Web designer, pages you create could look drastically different from system to system and browser to browser

  7. HTML Documents • HTML code is stored as an ASCII text file • Any text editor can be used to create these files: Notepad, TextEdit, EditPad etc. • You could use a web authoring tool to write your HTML code, but they often self-generate code • Focusing on the basics with a simple text editor will help you “really” learn to code

  8. Naming Conventions • For windows-based browsers, you should save the file with the extension of .htm or .html • Never use spaces or special characters like # or @ in your filenames • Filenames may be case-sensitive depending on the server • Keep filenames short • You can set your own conventions

  9. Sample Page <!DOCTYPE html> <head> <title>My First Webpage!</title> <meta charset=“utf-8”> </head> <body> <p>WOW! <br> This is pretty cool! </p> </body> </html>

  10. What it Means <html> beginning HTML encoding. <head> beginning the header section. <title>My First Webpage!</title> title of page <meta charset=“utf-8”>information about page </head> ending the header <body> beginning the body of the document. <p>WOW! starting of a paragraph <br> line break This is pretty cool! </p> ending of a paragraph </body> ending of the body section </html>ending of HTML encoding.

  11. Nesting of HTML Tags • In the previous code example, notice how the <title> </title> tags fall in between the <head> </head> tags • Also see how the <body> </body> encloses all the text you see on the screen • Make sure you always use proper nesting of tags

  12. Choosing a Good Title • The title may be required, but it is also useful • The title is displayed in user bookmarks and favorites • Descriptive titles improve accessibility • Search engines rely heavily on titles • Keep the title length in check so it will fit in the title area

  13. Attributes • Attributes modify the properties of a tag • For example: <img> is used to display an image. The altattribute is used to provide alternate text for the image. • <imgalt=“Tiger Swallowtail Butterfly”> • Part of using tags properly is understanding how to set the attributes associated with each tag • If an attribute is not set explicitly, it will have a default value

  14. HTML Comments • Comments add documentation to a web page • Text between the <!-- and --> will not be displayed in the browser • Comments can be used in any part of the web page • Readers may view comments if they “View Source”

  15. Block and Inline Elements • Block-level HTML elements start on a new line and some space is added before and after the element • Browsers treat block-level elements as if they were little rectangle boxes stacked on the page • Inline HTML elements do not start a new line, but stay in the flow of the paragraph

  16. Self-Terminating Tags • Some tags start and end in a single tag • <meta> meta data, documentation • <hr> horizontal rule • <br>linebreak • These tags are empty tags because they have no separate ending tag

  17. Validating Your Documents • Professional web developers catch errors in the markup by validating their documents. Here are some things validators check for: • An indication of character encoding • Inclusion of rules and attributes • Mismatched tags • Non-standard elements • Nesting errors

  18. Using Cascading Style Sheets • CSS allows you to control the“look and feel” of your web pages • There are three levels of CSS: • Inline – styles are wrapped around tags • Embedded – styles are group at beginning of file • External – styles are placed in a separate file and linked to the web page • More on CSS later

  19. Summary • HTML allows us to specify the structure, not the formatting of a Web page • We will be writing our pages using the HTML5 standard • The governing body of Web standards is the World Wide Web Consortium, W3C • HTML code can be written in any plain text editor • WYSIWYG editors are easy to use but their code may be proprietary and may not validate

More Related