Chapter 4 - Creating a Simple Page Flashcards
five basic steps of page production
- start with content
- give the document structure
- identify text elements
- add an image
- change how the text looks with a style sheet
rich-text
documents that have hidden style-formatting instructions for making text bold, setting font size, and so on
the five things browsers ignore
multiple-character (white) spaces, line breaks (carriage returns), tabs, unrecognized markup, text in comments
three parts to the anatomy of an HTML element
opening tag, content, closing tag
syntax
the anatomy of an HTML element
tag
consists of an element name within angle brackets
opening tag (start tag)
the element name appears here in brackets
closing tag (end tag)
the element name appears here in brackets preceded by a slash (/)
markup
the tags added around content
element
consists of both the content and its markup
empty element
an element that does not have content
basic document structure
<1DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Title here</title>
</head>
<body>
Page content goes here.
</body>
</html>
six parts to an HTML document
- document type declaration (DOCTYPE declaration)
- html element (root element)
- head element
- body element
- meta element
- title element
document type declaration (DOCTYPE declaration)
tells the browser which HTML specification to use to interpret the document
html element (root element)
contains all the elements in the document, and is not contained within any other element
head element
in the html element - contains elements that pertain to the document that are not rendered as part of the content, such as its title, style sheets, scripts, and metadata; identifies the head of the document that contains information about the document itself
body element
contains everything that we want to show up in a browser window; identifies the body of the document that holds the content
meta element
provide document metadata; provides information about the document
metadata
information about the document such as author, keywords, publishing status, description, and character encoding
character encoding
standardized collection of letters, numbers, and symbols
title element
a descriptive, mandatory, title; gives the page a title
code points
reference numbers of a standardized collection of characters
coded character set
a standardized collection of characters
character encoding
the way in which characters are converted to bytes for use by computers
Unicode (Universal Character Set)
super-character set that contains over 136 thousand characters from all active modern languages
HTTP header
information about the document that the server sends to the user agent
semantic markup
when marking up content, choosing the HTML element that provides the most meaningful description of the content at hand
Document Object Model (DOM)
the way elements follow each other or nest within one another, creating relationships between them; an outline
block elements
elements that start on new lines and do not run together, treated as though they are in rectangle boxes, stacked up in a page. each block element begins on a new line, with some space usually added above and below the entire element by default
inline element (text-level semantic element, phrasing element)
elements that stay in the flow of the paragraph
comments
notes in the source document put between comment tags (<!-- -->)
user agent style sheets
built in style sheets in browsers
empty elements
elements that do not have content because they are used to provide a simple directive
attribute
instructions that clarify or modify an element
two parts of the anatomy of an attribute
attribute name, value
Boolean attribute
describes a feature that is either on or off
Cascading Style Sheet (CSS)
changes presentation of a page
validator
software that checks your source against the HTML version you specify
What is the difference between a tag and an element?
A tag is part of the markup (brackets and element name) used to delimit an element. An element consists of the content and its tags.
Write out the recommended minimal markup for an HTML5 document.
<!DOCTYPE html><html lang="en"> <head> <meta charset=utf-8”> <title>Title</title> </head> <body> </body></html>
Indicate whether each of these filenames is an acceptable name for a web document (Y/N): Sunflower.html
Yes
Indicate whether each of these filenames is an acceptable name for a web document (Y/N): index.doc
No, must end in .html or .htm
Indicate whether each of these filenames is an acceptable name for a web document (Y/N): cooking home page.html
No, there may be no character spaces
Indicate whether each of these filenames is an acceptable name for a web document (Y/N): Song_Lyrics.html
Yes
Indicate whether each of these filenames is an acceptable name for a web document (Y/N): games/rubix.html
No, there may be no slashes in the name
Indicate whether each of these filenames is an acceptable name for a web document (Y/N): %whatever.html
No, there may be no percent symbols
The following is incorrect. Describe what is wrong with it and then write it correctly: <img “birthday.jpg”>
missing the src attribute
The following is incorrect. Describe what is wrong with it and then write it correctly: <em>Congratulations!<em></em></em>
missing the slash in the closing tag
The following is incorrect. Describe what is wrong with it and then write it correctly: <a href=”file.html>linked text</a href=”file.html”>
doesn’t need the attribute in the closing tag
The following is incorrect. Describe what is wrong with it and then write it correctly: <p>This is a new paragraph<\p>
used the wrong slash mark
How would you mark up this comment in an HTML document so that it doesn’t display in the browser window: product list begins here
<!--product list begins here-->
