<p>Html_CSS_myers_final.doc</p><p>March 15, 2016 http://www.asmarterwaytolearn.com/htmlcss/index-of-exercises.html</p><p>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. </p><p>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.</p><p>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.</p><p>Installed “Brackets.io” code editor (Brackets.1.6.Extract.msi)</p><p>Tags : note use of /, not \, <p>Hello </p></p><p>Headings <h1>….<h6>, should have at least one, and only one, <h1> headings</p><p>Can user <br> tags inside headings to set breaks/carriage returns</p><p><br> tags do not need </br> tags, can be used for single carriage return vs double for </p></p><p>Link to .css file: sample <link rel="stylesheet" type="text/css" href="css/styles2.css"></p><p>CSS: p -> indicates font style for a paragraph: e.g.</p><p> p { font-family: Georgia, "Times New Roman", Times,serif; }</p><p> h1 { font-family:sans-serif; }</p><p>Above list four fonts, last is a “generic” font available on all systems (alt sans-serif )</p><p>Web safe fonts = high probability of being available on user’s computer. See http://abt.cm/O7bwre</p><p>Font-size: 2em; even in heading this is a multiple of the default text size for the containing element.</p><p>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 : <p class=”important”></p><p>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.</p><p>Comments in CSS files /* this would be a comment */ </p><p>Comments in HTML file <!-- this is a comment  note -- before ></p><p>Comments can be more than one line of text</p><p>NOTE: multiple classes can be assigned to element (an element would be tag like <p> or <h2>, eg.</p><p><p class = “important bold_c red_c” ></p><p>The above would cause the attributes set in each of the three css classes ( important, bold_c ,and red_c) to be assigned to that paragraph. Note use of “ and spaces with multiple css classes.</p><p>Classes not tied to a particular element :</p><p>Note: css classes can be created that are not tied to a specific element (like p or h1) and then used with any element. </p><p>.typewriter { font-family: “Courier New”, Courier, monospace; }</p><p><p class=”typewriter”>This paragraph uses a class that could also be used with a header.</p></p><p>Font-weight [100->900] lighter,normal,bold,bolder, <b> </b> <strong> </strong></p><p>Font-st yle italic <i> </i>, <em> </em></p><p><p> this uses the span <span class="typewriter">tag to style some</span>, but not all, text</p></p><p><div> vs <span> : </p><p><div> tags can be used to define separate sections of the web page, such as main, links, footer, etc. </p><p>Div tag must be on a separate line of html code <div></p><p>Span tag can be in the middle of a line</p><p><p>This uses a <span>span</span> tag</</p><p>Colors:</p><p> http://www.colorpicker.com/ Hex values</p><p> http://www.crockford.com/wrrrld/color.html color names</p><p>.mycolor { color: #FC0A0A; } .color2 { color: lime; }</p><p><p class="mycolor">That's my name.</p></p><p><p class="color2"><b>and this is lime</b></p></p><p>Spacing:</p><p>Letter_spacing: .1em [ adds to default ] 0 would be default</p><p> word_spacing:</p><p> line-height: [1.2em is normal spacing ]</p><p>Alignment:</p><p> text-align: left; [right, center, justify ]</p><p>Indentation:</p><p>Text-indent: 1.5em;</p><p><blockquote> Indents entire paragraph</p><p><blockquote></blockquote></p><p>Margins: clockwise top, right, bottom, left, go outside of borders</p><p>Margin: 2em 2em 2em 2em; Margin: 2em;</p><p>Margin: top, right, bottom, left - in clockwise order from top</p><p>Also can use : Margin-top, margin-right, margin-bottom, margin-left;</p><p>Borders: go inside of margins</p><p>Border: 1px dotted #0000ff; [ width style color ]</p><p>Border styles : dotted, dashed, solid, double, groove, ridge, inset, outset</p><p>Border-top, border-bottom, border-right, border-left</p><p>Padding (inside border ):</p><p>Padding: 1em;</p><p>Padding: .em .2em 0 .3em; [top, left, bottom, right ]</p><p>Padding-top, padding-bottom, padding-left, padding-right</p><p>Inheritance:</p><p>Parents -> children</p><p>“elements” – such as P, h2, h4, are children of the parent “body”</p><p>Elements inherit the settings for their parents. </p><p>The browser default size is 1em. It can be over-ridden by the body font-size setting.</p><p>Apparently a parent with 1.5 em and a child with 2.em would give the same sizes as two separate classes of 1.5em and 3em;</p><p>Elements inside a container defined by tags inherit the settings of the parent, but can over-ride them if desired.</p><p>Grouping:</p><p> h1, h3, p.cent {</p><p>NOTE use of commas. This can be confusing. Compare:</p><p> h1, h3, p.cent {</p><p>With</p><p> h1 h3 p.cent The first defines the settings for three separate elements, h1, h3, and the <p class=”cent”>; these elements are grouped and each member of the group gets the defined settings.</p><p>The second defines settings for elements nested :</p><p> h1 h3 p.cent id </p><p> ids are used in two distinct ways. In one use they are handled almost exactly like a class, as shown below. In the other use they assign a name/identification id to something, such as a location in a web page, and then can be used later (e.g. a button to go to that id/location)</p><p> h1#this_id {</p><p><h1 id=”this_id”></p><p>The difference between the above “id” and a class, other than the use of # in place of ., and id= in place of class=, is that a particular id can only be used once in the document. So, for example, if there is only one main section of the document, it could be begun with <div id=”main_styling”>.</p><p>Img</p><p></p><p>An html img element identifies a separate graphic file to be displayed.</p><p>By default the image is displayed on the left margin, but classes </p><p>To position image use margins, e.g. for center margin: 0 auto 0 auto</p><p>Block vs inline:</p><p>Display: block;</p><p>Display: inline</p><p>Somewhere I saw a list of all those elements that are by default “block” vs those that are “inline”. I can’t find it yet, but some of what I recall are:</p><p>Block: p, h1 to h6, div</p><p>Inline: img, link, span, a (href)</p><p>Floating: Permits putting text beside something like an image, or a positioned <div> section</p><p>Float: left;</p><p>Float: right </p><p> img.wrap_around_right { float: left; }</p><p>After floating, will need to clear float </p><p>.clear_float { clear: both; }</p><p><dif class=”clear_float”></dif></p><p>Links:</p><p><a href=”http://www.boppers.net”>Link to Boppers</a></p><p><a href=”sub_dir/sample.html”></p><p><a href=”../higher_dir/another.html”></p><p>To link to a location on a page, first set an “anchor”, i.e. a location to link to. In HTML this is done with and ID. E.g.</p><p><div id=”top”></p><p>Then link to it with <a href=”#top”>back to top</a></p><p>Open new window for href <a href=”http://www.boppers.net” target= “_blank”></p><p>Page 89 of book gives short javaScript code to open a small page on top of the main page.</p><p>Styling links:</p><p>By default links are blue and underlined. Underline can be removed.</p><p>Text-decoration: none; [removes underline]</p><p>Text-decoration: underline; [ adds underline ]</p><p>Clickable images:</p><p><a href=http://www.boppers.net></a> Image maps:</p><p>Image maps allow selecting specific parts of an image to be buttons for links. The area can be a rectangle, a circle, or a polygon. If multiple shapes are being selected this can be very tedious. There are tools for doing this. </p><p>Free tool: http://www.image-maps.com</p><p>$15 after trial period (better tool) : http://www.boutell.com</p><p>Steps:</p><p>Place image on page and include in img tag as shown then use code below with href to the web page (.html file) that contains the image.</p><p><map name=”building”> <area shape=”rect” alt=”tuttle house” cords=”76,42,279,510, href=”tuttle-house.html”></p><p>Lists: page 101</p><p><!-- unordered list - bullets --> <ul> <li>Sun</li> <li>Moon</li> </ul></p><p><!-- ordered lists - mumbered --> <ol> <li>Wash</li> <li>rinse</li> <li>repeat</li> </ol></p><p>Use css styles to format lists</p><p>CSS Selector : everything on the first line the precedes the { page 107</p><p>Examples:</p><p> p p.important { .important { p#important { #important {</p><p> combine selectors to create a new selector p h1 { This selector would only impact h1 headers inside a <p> section</p><p> div + p { impacts only the first paragraph following any <div></p><p> di#main > div { impacts only the first level within div with id of main</p><p> resource: http://www.w3schools.com/CSSref/trysel.asp</p><p>Tables: page 109</p><p><table> <tr> <td>Row 1,column 1</td> <td>Row 1, column 2</td> </tr></p><p><tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tr> </table></p><p>Headings <th scope=”col”>a col Heading </th></p><p><th scope=”row”>Row Heading</th></p><p>Borders, Spanning rows and columns, spacing, Aligning text, background color, </p><p>Forms: input parts are called “controls” page 135</p><p>Use labels to (a) make item prompt (e.g. “Google” below) clickable, and read out-loud by reader.</p><p><form action="send-email.php" method="post"> last name: <br> <input type="test" name="surname" size="25" maxlength="40"> <br><br> How did you find us? <br> <label> <input type="radio" name="found-thru" value="Google" checked= "checked"> Google</label></p><p><fieldset> <input type="radio" name="found-thru" value="friend" > Friend <br><br> How would you describe our site?<br> <input type="checkbox" name="feedback" value="Wondeful" checked="checked"> Wondeful <input type="checkbox" name="feedback" value="Brilliant"> Brilliant <br><br> Your State:<br> <select name="current-state"> <option value="A">Alabama</option> <option value="AK">Arkansas</option> <option value="AZ">Arizona</option> </select> >/fieldset> <br><br> Message" <br> <textarea name="message" rows="4" cols="30"></textarea> <br><br> <input type="submit" value="send email message"> </form></p><p><fieldset>…</fieldset> will group controls and draw a box around them</p><p>Layout : Nested boxes: pg 169</p><p>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 <body> </body> 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 <body> </body> tags are set by the browser.</p><p>I discovered that centering an image requires using display: block;</p><p> div#main { width:60%; margin: 0 auto 0 auto; } img { display: block; margin-left: auto; margin-right: auto; }</p><p>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;</p><p> img { display:block; float: right; }</p><p>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. </p><p>Div#header { Position: fixed; top: 0; left 0; }</p><p>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.</p><p>Navigation bars:</p><p>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.</p><p>Background Images: page 219</p><p> body#main { background-image: url(“images/emu.jpg”); }</p><p>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 </p><p> background-repeat: no-repeat;</p><p>IFRAMES:</p><p>An iframe permits inserting a window in a page such that another web page is displayed in that window.</p><p><iframe src="http://www.boppers.net/" width="700" height="450"></iframe> <p>This is supposed to put boppers.net in the middle of the page</p> <html> <head> <title>Practice</title> <link rel="stylesheet" type="text/css" href="css/styles_hb2.css"> </head> <body> <p>This is some text to begin the page</p> <h3> The slow emu </h3> <iframe class="margin_left" src="http://www.boppers.net/" width="700" height="450"></iframe> <p>This is supposed to put boppers.net in the middle of the page</p> </p><p></body> </html> Embedding videos page 225</p><p>This section deals with embedding youtube videos and vimeo videos.</p><p>Embedding Audio: page 231</p><p>The <audio controls> approach shown here differs from the way I have made mp3 files available in that it does not automatically start the recording, but gives a control that permits the viewer to click it to start it.</p><p><p class= "hb_audio"> Hail Blessed Morn" </p> <audio controls> <source src="hail.mp3" </audio></p><p>Ems vs Percentages vs. Pixels : Page 233</p><p>Ems –- use for typeography, margins, padding</p><p>Percentages – Use them vor divs, tables, iframes and sometimes margins and paddings</p><p>Pixels – use them for images, borders, windows, iframes, and fixed, absolut and relative positioning</p><p>Relative and Static Positioning: pg 84 position: fixed; use px top: 30px 20 pixels from top left: 20Px 30 pixels from left</p><p> position: absolute; use px</p><p> position: relative; use % or px</p><p> position: static this is the standard, normal, default, positioning z-index Pg 237</p><p>The default z-index for any element is 0</p><p>An element with a higher z-index will sit on top of one with a lower z-index</p><p> h2.header { z-index: 1; }</p><p>Media Queries pg 239</p><p>Media queries permit the web page to respond appropriately to screens of different sizes.</p><p>There are 13 different media characteristcs you can test for in a media quey.</p><p>There are various ways to incorporate media queries in your code.</p><p>Example CSS and HTML</p><p>@media only screen and (min-divice-width: 320px) and (max-device-width: 480px) { img.gallery { display: block; { {</p><p></p><p>Min- and max-width, min- and max-height pg 243</p><p>Div#additional_info { width: 20%; min-width: 200px;</p><p>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:</p><p><!doctype HTML> <html lang=”en”> <head> <meta charset=”utf-8”> <title>Put page title here</title> …. Other stuff for heading </head></p><p>The Meta Description</p><p>Optional. Search engines will display the description if they find your page. Search engines will cut off the description at about 160 characters.</p><p><head> <meta name=”description” content=”This would be the description.. “ > … </head></p>