Chapter 4 - Creating A Simple Page Flashcards
What are the steps that make up the basics of page production?
Step 1: Start With Content: Start by writing up raw text content
Step 2: Give the doc structure: by using the appropriate html elements
Step 3: Identify text elements Describe the content using the appropriate html text elements
Step 4: Add an image. By adding an image, you’ll learn about attributes & empty elements
Step 5: Change the page appearance with a style sheet. Format the content with cascading style sheets
Step 6: Validate your document
You should always use proper suffixes for your files when naming them… what are the proper suffixes for files, and what are some of the other considerations
Use proper suffixes for your files: .html, .gif, .png, .jpg
Never use character spaces within filenames: use an underline character or hyphen to visually seperate words within filenames, such as robbins_bio.html or robbins-bio.html
Avoid special characters: such as ?, %, #, /, :, ;, ., etc. Limit filenames to letters, numbers, underscores, hypens, and periods
Filenames may be case-sensitive: depending on server configuration - consistently using all lowercase letters in filenames, although not necessary, is one way to make your filenames easier to manage
Keep filenames short: short names keep the character count and file size of your html file in check.
Self-Imposed Conventions: It is helpful to develop a consistent naming scheme for huge sites. i.e., always using lowercase w/ hyphens between words.
What is the purpose of html?
html is used to indicate the structure of a document so the browser can display the text in a meaningful way
Describe the anatomy of an html element?
Content Here…. the first bracket is the opening tag, the middle is the content, and the third bracket is the closing tag… The element name appears in the opening tag (also called a start tag) and again in the closing (or end) tag preceded. The tags added around the content are referred to as the markup - it is important to note that an element consists of both the content and its markup
Is the capitalization of element names important?
no….. however, in XHTML (the stricter version of html) - all element names must be all lowercase in order to be valid
Describe the minimal html structure (parenthesis are notes & not part of the doc structure)
(doc type decl, id’s the doc as an html doc)
(contains descrip info about the doc)
(mandatory title element) charset="utf-8"> (provides info about the doc) Title here
(contains everything we want to show) Page content goes here
List some reasons why you should give a good title
- the title is what is displayed in a user’s bookmarks or favorites, or browser tabs
- also a key tool for improving accessibility, as they’re the first thing a person hears when using a screen reader. Search engines rely heavily on doc titles as well. for these reason, provide thoughtful & descriptive titles for all docs and avoid vague titles… also, keep the length of your titles in check so they’re able to display in the browsers title area…. also put the part of the title with more specific info first so the page title is visible when multiple tabs are lined up in the browser window
What is semantic markup?
choosing the html element that provides the most meaningful description of the content at hand… choose elements based on what makes the most sense for the content. Most importantly, in addition to adding meaning to content, the markup gives the document structure - the way the elements next within one another creates relationships between the elements - it forms an outline (Doc Object Model) - and this underlying structure (hierarchy) is important b/c it gives browsers cues on how to handle content - it also the foundation upon which we add presentation instructions with style sheets and behaviors with JavaScript
Block Elements vs Inline Elements… Discuss
Browsers treat block elements (i.e. paragraph or heading element, as though they’re in little rectangular boxes - they begin on a new line w/ some space added below and above the box; while inline elements don’t start new lines, they just go with the flow (i.e. em element)
What are empty elements
They don’t have text content because they’re used to provide a simple directive. i.e. the img element simply tells the browser to go fetch a picture and place in that exact location with the flow of the document
What are attributes
Attributes are instructions that clarify or modify an element i.e. the <img></img> tag isn’t very useful by itself - there’s no way to know which image to use… i.e. it’s always attributename=”value”
<img></img>
Note:
Attributes go after the element name in the opening tag only , never in the end
There may be several attributes applied to an element, separated by spaces in the opening tag
might be a number, word, string, url, measurement,
some values don’t have to be in quotations
also, you can’t make up an attribute - the attribute names available for each element are defined in the html specifications
Discuss validating your documents
Just refers to the process of catching errors in the document. - to validate your document is to check your markup to make sure that you’ve abided by all the rules of whatever version of html you’re using. Error-Free docs are said to be valid. Why validate your docs? Validated docs are more consistent on a variety of browsers, they display more quickly, and are more accessible
So, how do you validate your doc?
by using a validator - a validator is a software that checks your source against the html version you specify. Validators check for…
- the inclusion of a DOCTYPE declaration. Without it the validator doesn’t know which version of HTML or XHTML to validate against
- An indication of the character encoding for the doc
- The inclusion of required rules and attributes
- Non-Standard elements
- Mismatched tags
- Nesting errors
- Typos and other minor errors
check your tools listing for a list of credible validatorss
