Html CSS Myers Final

Html_CSS_myers_final.doc

March 15, 2016 http://www.asmarterwaytolearn.com/htmlcss/index-of-exercises.html

I have completed reading the book. I stopped doing the exercises a some point before getting half way through the book. While I was doing the exercises I kept notes in Html_CSS_myers.doc. I am going to edit those notes to keep some parts similar to what I intend to type in for the rest of the book.

I will then review the rest of the book, adding some notes to this memo and typing and running css and html code to test my understanding of anything that I feel would be of value, especially if I have any questions about the possible results of particular code.

This final review and note taking is taking a lot of time. I have considered that I could put my notes on the web and be able to access them. However, there are already probably better notes on the web that are easily accessible ( see web_dev_general_resources_1.doc). However, I think it is a good exercise for me to do, so I will continue for now.

Installed “Brackets.io” code editor (Brackets.1.6.Extract.msi)

Tags : note use of /, not \,

Headings

Can user
tags inside headings to set breaks/carriage returns

tags do not need
tags, can be used for single carriage return vs double for

Link to .css file: sample

CSS: p -> indicates font style for a paragraph: e.g.

p { font-family: Georgia, "Times New Roman", Times,serif; }

h1 { font-family:sans-serif; }

Above list four fonts, last is a “generic” font available on all systems (alt sans-serif )

Web safe fonts = high probability of being available on user’s computer. See http://abt.cm/O7bwre

Font-size: 2em; even in heading this is a multiple of the default text size for the containing element.

Font-size could also be in percentages, pixels or points. CSS Classes p.important { font-size: 1.5em; } in HTML to use a css class :

Default font size: normally 1em = default browser size. But this can be over-ridden by any container. The default size will be the last size to have over-ridden prior sizes.

Comments in CSS files /* this would be a comment */

Comments in HTML file

Use css styles to format lists

CSS Selector : everything on the first line the precedes the { page 107

Examples:

p p.important { .important { p#important { #important {

combine selectors to create a new selector p h1 { This selector would only impact h1 headers inside a

section

div + p { impacts only the first paragraph following any

di#main > div { impacts only the first level within div with id of main

resource: http://www.w3schools.com/CSSref/trysel.asp

Tables: page 109

Headings a col Heading

Row Heading

Borders, Spanning rows and columns, spacing, Aligning text, background color,

Forms: input parts are called “controls” page 135

Use labels to (a) make item prompt (e.g. “Google” below) clickable, and read out-loud by reader.

Layout : Nested boxes: pg 169

Everything is inside something. This can be thought of as boxes inside boxes. The biggest box we can deal with is the one created by the tags. Whatever styles are set for an outer container, including he default ones not explicitly set by the creator of the page, are inherited by the boxes immediately inside it. This rule of inheritance continues in the nesting hierarchy. The default styles for the tags are set by the browser.

I discovered that centering an image requires using display: block;

div#main { width:60%; margin: 0 auto 0 auto; } img { display: block; margin-left: auto; margin-right: auto; }

Float: allows text to either side of an image In spite of what the books says, my text did not wrap with “float” until I put in the “display: block” setting;

img { display:block; float: right; }

Note: the book goes into some detail about the layout of a header. Options covered include putting a graphic in the header, having a non scrolling header, and have a header, or other element, in a fixed position. The fixed position required additional HTML code to keep one element from being on top of another.

Div#header { Position: fixed; top: 0; left 0; }

After about 30 minutes of working with it I was unable to get the combination of fixed header and scrolling text to work so that the the header did not overlay the text when it scrolled. I note that I have not noticed this being used in web pages. I don’t plan to spend any more time on it.

Navigation bars:

Pages 159 throgh 218 dealt with navigation bars. I will study this when I need it. The basic idea is to make the list of clickable items look like buttons, either horizontally or vertically listed.

Background Images: page 219

body#main { background-image: url(“images/emu.jpg”); }

The background-image style line can also be followed by “background-repeat: repeat-x; or “repeat-y, or if you want to repeat both x and y then leave the repeat out and an images small enough to be repeated will be repeated. If you don’t want a smaller background image to repeat put in

background-repeat: no-repeat;

IFRAMES:

An iframe permits inserting a window in a page such that another web page is displayed in that window.

This is supposed to put boppers.net in the middle of the page

This is some text to begin the page

This is supposed to put boppers.net in the middle of the page

Embedding videos page 225

This section deals with embedding youtube videos and vimeo videos.

Embedding Audio: page 231

Hail Blessed Morn"

Ems vs Percentages vs. Pixels : Page 233

Ems –- use for typeography, margins, padding

Percentages – Use them vor divs, tables, iframes and sometimes margins and paddings

Pixels – use them for images, borders, windows, iframes, and fixed, absolut and relative positioning

Relative and Static Positioning: pg 84 position: fixed; use px top: 30px 20 pixels from top left: 20Px 30 pixels from left

position: absolute; use px

position: relative; use % or px

position: static this is the standard, normal, default, positioning z-index Pg 237

The default z-index for any element is 0

An element with a higher z-index will sit on top of one with a lower z-index

h2.header { z-index: 1; }

Media Queries pg 239

Media queries permit the web page to respond appropriately to screens of different sizes.

There are 13 different media characteristcs you can test for in a media quey.

There are various ways to incorporate media queries in your code.

Example CSS and HTML

@media only screen and (min-divice-width: 320px) and (max-device-width: 480px) { img.gallery { display: block; { {

Min- and max-width, min- and max-height pg 243

Div#additional_info { width: 20%; min-width: 200px;

Above will set screen to 20% of width, but only if that is greater than 200 pix. If it would be less than 200 pix, it would use 200 pix of the screen. Top of HTML file:

Put page title here …. Other stuff for heading

The Meta Description

Optional. Search engines will display the description if they find your page. Search engines will cut off the description at about 160 characters.

Row 1,column 1	Row 1, column 2
Row 2, column 1	Row 2, column 2

Html CSS Myers Final

….

, should have at least one, and only one,

The slow emu