Midterm review

Today we went over the review for the midterm exam. During our review, Brother Curtis gave us a list of things you should know and skills you should have.

First of things we should know:

  • How the www works
    • server, browser, internet, docs, ets
  • section, article, header, nav, -what’s new and why do we have these new elements. Why didn’t div work? Needed more specific semantic elements http://html5doctor.com/you-can-still-use-div/ http://www.ibm.com/developerworks/library/x-html5/
    • html – the structure of the website
    • scc – style, presentation
    • div – way to divide page (container to apply style)
      • section, article. ie – div di=main_content, div id=header, div id is a label
      • problems -people are concerned that people will add more elements and the code will get bloated.
    • we’re moving towards more meaningful elements and away from div
  • what’s valid?
    • the page is consistent with the standard
    • first line – <!DOCTYPE html>
    • head
      • title
      • meta charset
    • body
      • valid elements
      • required attributes
    • nesting elements
      • communicates structure of docs and allows us to style

And now skills we should have:

  • Markup plain text using HTML
  • reference path – <img src=”
    • absolute: http://www
    • relative: ./images/picture.jpg
  • Layout a page using CSS
    • .columns {
      • display: inline;
      • float: left;
      • width: 230px;
      • margin-left: 10 px; margin-right:10px
      • padding: 0px;
      • background-color; #F1F1EA;
      • vertical-align: top;
    • #caption { text-transform: uppercase;
      • font-size: 80%
      • -moz-transform: rotate(-90deg);}

These are all things we should know and can do up to this point in our learning.

Advertisements
Posted in Uncategorized | Leave a comment

CSS cont.

The following is a list of examples we went through in class for grouping selectors as discussed in my last post:

h1

{

color:green;

}

h2

{

color:green;

}

p

{

color:green;

}

to

h1,h2,p

{

color:green;

}

CSS ID and Class

The “#” before the name identify the ID

The “.” before the name identifies the class

The following are examples of identifying the ID:

<html>

<head>

<style type=”text/css”>

#para1

{

text-align:center;

color:red;

}

</style>

</head>

<body>

<p id=”para1″>Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

ID and class – http://www.w3schools.com/css/css_id_class.asp

External, internal, & inline  Style Sheet – http://www.w3schools.com/css/css_howto.asp

inline & span – http://www.w3schools.com/css/css_howto.asp

positioning – http://www.w3schools.com/css/css_positioning.asp

Posted in Uncategorized | Leave a comment

Box Model

This is an example of a Box Model

Margin, border, and padding as you see in the picture, are all situated around the content. You can designate the size and style of these in your style sheet.

The following is an example of how you can do this.

<style>

body {

border-style: solid;

border-color: black;

width: 50%;

background-color: blue;

}

p  {

width: 250px;

padding: 100px; or 10px 20px; or all four sides

border-style: solid; of border-bottom-style: solid

border-color: black;

or border: solid black 10px;(for all encompassing)

outline: 1px solid red; (around border)

margin: 30px;

}

</style>

Posted in Uncategorized | Leave a comment

Style & CSS cont. Fonts, etc.

Today we went over a Review of CSS
Remember the following points:

  • Google.com/webfonts for link elements to embed into your webpage.
  • Code.google.com/webfonts for a preview of the font
  • px = pixel
  • pt = point
  • em = letter and word spacing.
  • #ul {text-decoration: underline; font-style: italic;}
  • #first {font-size: 40px;}

Color

  • h1 { color: rgb(125, 0, 225;) or rgb(50%, 0%, 100%);

background-color: black; }

  • p { color: #0000FF; }
  • ol { color: green; }
  • Kuler.adobe.com for color palets

These additional links will help with css:

Lists

Posted in Uncategorized | Leave a comment

Style & CSS

Style & HTML Entities

Today we first talked about entities. Entitites in html are reserved characters that require code to display. for example, since html uses < and > signs in its code, these can’t be inputed as such so for example, To display a less than sign we must write: &lt; or &#60. using these codes will place the correct sign in the browser.

There are several reserved character entities. For some additional examples, click the following link:

http://www.w3schools.com/html/html_entities.asp

You can google html entities also.

Into to CSS

<div> & <span>

Block-Level Elements in html are called <div>. The <div> tag defines a division or a section in an HTML document. divs can be used to group block-elements. This allows the designer to format them with styles.

Inline Elements on the other hand are called <span>. When the text is closed in a span element, you can add styles to the content directly in the line.

These elements allow us to use inline style or style sheets.

CSS stands for Cascaded Style Sheet. It is created in levels and layers similar to a cascading water fall.

STYLE SHEETS

This is an example of how you can style an element in a style sheet:

This will cause all of your h1 headings in you html document to be blue and 12px in size.

h1     { color: blue; font-size: 12px }

The following is an example of how you would create a style sheet in your html doc.

<!DOCTYPE html>

<html>

<head>

<title>Web Design With Style</title>

<meta charset=”utf-8” />

<style type=”text/css”>

h1 {color: blue; font-size: 12px}

</style>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

There are several ways to style. For example:

Styling w/Fonts

  • The following are font family types:
    • Monospace – letters have equal width
      • lllll
      • MMMMM
      • lllll
      • MMMMM
    • sans serif – No wings on letters. Easier to read on screen (Arial)
    • Serif – Wings on letters. Easier to read on print (Times New Roman, Georgia, etc.)
    • Cursive
    • Fantasy

To style your font in a CSS, you would label the element like this:

p { font-family: “Times New Roman”, serif; }

h1 { font-family: “Liberation Sans”, Arial, Helvetica, sans-serif; } if the font name has more than one word, use quotes.

Other sources of web fonts can be found on:

  • Google.com/webfonts for link elements to embed into your webpage.
  • Code.google.com/webfonts for a preview of the font

Some important points to know when coding css fonts are as follows:

  • px = pixel
  • pt = point
  • em = letter and word spacing.
  • #ul {text-decoration: underline; font-style: italic;}
  • #first {font-size: 40px;}
  • Color
  • h1 { color: rgb(125, 0, 225;) or rgb(50%, 0%, 100%);

You can style your background by using the following code:

background-color: {black; }

  • p { color: #0000FF; }
  • ol { color: green; }
  • Check out Kuler.adobe.com for color palets
Posted in Uncategorized | Leave a comment

Forms

Today we talked about forms. Forms create a way for users to input information that can be collected or sent the a designated location like an email account or a server. the html elements and tags for forms are fairly extensive. Here is a list of those used in the new html 5:

http://www.w3schools.com/html5/tag_form.asp

And these are the original html 4 examples:

http://www.w3schools.com/html/html_forms.asp

When using creating forms, use the following format as an example:

<body>

<form action=”form.cgi” method=”get”>

<fieldset>

<legend>Contact Information</legend>

<ol>

<li>

<label for=”fname”>First Name</label>

<input type=”text”  id=”fname”/>

</li>

<li>

<label for=”lname”>Last Name</label>

<input type=”text”/>

</li>

<li>

<label for=”gender”>Sex</label>

<input type=”radio” value=”male”/>Male

<input type=”radio” value=”female”/>Female

<li/>

<li>

<label for=”vehicle”>What transportation do you use? </label>

<input type=”checkbox” value=”car”/>Car

<input type=”checkbox” value=”bike”/>Bike

<input type=”checkbox” value=”shoes”/>Shoes

<li/>

<li>

<textarea name=”instructions” rows=”5″ cols=”40″> Enter special instructions for the delivery

</textarea>

<li/>

<li><label for=”hometown”>Hometown</label>

<select id=”hometown”>

<option value=”Laie”>Laie</option>

<option value=”Kahuku”>Kahuku</option>

<option value=”other”>Other</option>

</ol>

</fieldset>

<input type=”submit” value=”submit”/>

</form>

</body>

Posted in Uncategorized | Leave a comment

Assignment Overview

Html assignment:

Today we mostly talked about our upcoming assignment. In this assignment we will put our knowledge to use and make our first page.

Below, I have listed the assignment reqiremnets that we went over in class. I’ve also pasted my link as well as the html we reviewed in class that we need to include in our site.

These are the points we went through in class:

  • Add two more organized pages to your IS2 web site. (6 points)
    • Each page should be syntactically valid (30 points)
    • Each page should link to the other pages on the web site (6 points)
    • The Web site should contain at least the following elements: (14 points)
      • <table>
      • <tr>
      • <td>
      • <th>
      • <ol>
      • <ul>
      • <li>
      • <form>
        • Pushing submit does not have to generate any action.
      • <input>
        • of type=submit and at least three other types
      • <textarea>
      • <select>
      • <option>
    • The Web site should contain at least two entities representing special characters. (4 points)

http://tss49.is2.byuh.edu/html01/index.html

<!DOCTYPE html>

<html>

<head>

<title> HTML 01 Assighmnt</title>

<meta charset=”utf-8″ />

</head>

<body>

<header>

<h1>Hello World</h1>

<p>Welcome to my web page</p>

</header>

<nav>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”school.html”>School</a></li>

<li><a href=”work.html”>Work</a></li>

</ul>

</nav>

<section>

<h2>About me</h2>

<p> I am a student of BUS at BYU-H <a href=”http://www.byuh.edu” target=”_blank”> Brigham Young university Hawiaii</a></pa>

<article>

<h1>

<p>

<img src=”(source)” alt=”(description)”/>

</article>

</sectioin>

<footer>

<p>This page is copyrighted by Thad Stott. For permissions contact me at cruxstew@yahoo.com</p>

</footer>

</body>

</html>

Posted in Uncategorized | Leave a comment