HTML Primer

What is HTML? HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content

HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag (also known as opening and closing tags) The end tag is written like the start tag, but with a slash before the tag name Some HTML tags are single tags eg

HTML Page Structure

Create first webpage Create new folder (This will be your website) Create a new notepad doc (This will be deleted later) Type basic HTML tags Get filler text from Save document as index.html Delete the notepad doc (created in step 2) View index.html in browser Edit source and view changes

HTML coding rules For paired tags, correct coding is like this eg For single tags it is like this eg. Open first, close last ie. Correct way … Hello World Wrong way … Hello World Values MUST be enclosed by quotation marks Eg. Tag Attribute Value

HTML coding guidelines Use all lowercase for HTML tags Use either single or double quotes for values Use spacing and returns for readability Use lots of comments ie.

HTML naming conventions Do NOT use blanks for file or folder names Avoid use of uppercase … some ok, not all eg. myWeb Do NOT use special characters eg etc for file or folder names

Basic HTML tags

The Anchor Tag Four types of hyperlinks … External … href=“ Internal … href=“aboutme.html” … Jump … href=“#somewhere” (jumps to id=“somewhere”) See demo files

Embedding video or music… Refer to notes Embed internal video – refer to notes Embed external video – check out youtube…

Three approaches to styling Inline or Embedded Style Frequently Asked Questions... regarding your dates Internal Style External Style

Extent of the three kinds of styling h1 { color:blue} HTML HTML h1 { color:green } CSS HTML HTML HTML

CSS Selector Types and Syntax (pg4-4) Four types of Selectors Tag Class ID Compound All follow the same syntax Name followed by { curly brackets } element { property:value ; property:value ; }

Tag styles Tag styles change the default styling of HTML Tags h1 blockquote

Class styles (pg4-17) Class styles allow you to share styles among different HTML elements and to name your elements, thus giving added meaning to your document structure. Note: Give your class styles meaningful names BUT do not use HTML tagnames. Eg class=“qquote” … and not class=“blockquote”

Extent of the three kinds of styling h1 { color:blue} h1 { color:green } HTML HTML CSS HTML HTML HTML

CSS Box Model

Why use a Container ID? A container ID makes it easier to keep the webpage together on different screen sizes. Makes for consistent look and feel, especially when margin:auto is used.

Why set Container ID to 650px? This is a single column layout. Easier to maintain the max reading width for content

How to create a double column layout? Change width of navbar ID AND maincontent ID to less than the width of the container ID Combined widths of the navbar ID and maincontent ID must be equal or less than the width of the container ID. Increase width of container ID if necessary, keeping the max width of container to 960px. Why 960px? The project is to be optimized for a 1024 x 768 monitor. CONTAINER HEADER NAVBAR MAINCONTENT