Learning Web Design: Chapter 4. HTML Hypertext Markup Language (HTML) Uses tags to tell the...
19
Learning Web Design: Chapter 4
-
Upload
richard-waters -
Category
Documents
-
view
222 -
download
0
Transcript of Learning Web Design: Chapter 4. HTML Hypertext Markup Language (HTML) Uses tags to tell the...
Learning Web Design: Chapter 4
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
A Brief History of HTML The base set of tags is referred to as
HTML 2.0Standard set by the W3CSet of tags all browsers must support
In 1996, HTML 3.2 specification created by group of vendors and W3CIncludes tables, applets, text flow around
imagesBackward compatible with HTML 2.0
In 1997, HTML 4.0 incorporated:DHTML, Cascading Style Sheets and Frames
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.0Additional rules needed to make code compliant
HTML Describes the Page Structure Documents have common elements:
ListsParagraphsTitlesHeadingsTables
HTML also defines character styles like bold and italicize
Each element has a name and is contained in a tag
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
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
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
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>
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.
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
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
Attributes
Attributes modify the properties of a tag For example: <img> is used to display an image.
The alt attribute is used to provide alternate text for the image.<img alt=“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
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”
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
Self-Terminating Tags
Some tags start and end in a single tag<meta> meta data, documentation<hr> horizontal rule<br> line break
These tags are empty tags because they have no separate ending tag
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 encodingInclusion of rules and attributesMismatched tagsNon-standard elementsNesting errors
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 tagsEmbedded – styles are group at beginning
of fileExternal – styles are placed in a separate
file and linked to the web page
More on CSS later
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 editorWYSIWYG editors are easy to use but their code
may be proprietary and may not validate
