The title of the lesson is “Building your first web page”. Here are a few bullets I found interesting:
As a general rule in webpages, HTML represents the actual content of the webpage, while CSS reps appearance
Common HTML terms which would be encountered: Elements, tags, and attributes.
Common CSS terms to be familiarized: selectors, properties, and values
Use css resets to ensure cross-browser compatibility.
span donot hold any semantic value. They exist for styling purposes only.
block-level elements, while
Text-based elements include: strong, p, H1 through H6, em, e.t.c.
Structural elements include: header, nav, article, aside, section, footer, e.t.c.
The Cascade: CSS rules are interpretted from top to bottom. Styles literally cascade from the top of the stylesheet to the bottom.
Generally, in terms of specificity weight, type < class < id.
absolute(e.g. pixels – px) or
relative(e.g. percentages – %, em).
display property values include:
The Box Model: Every element on a pages is a rectangular box.
box-sizing property, introduced in CSS3, allows one to change exactly how the box model works.
box-sizing property accepts the following values:
content-box: The default value (additive).
border-box: Incorporates both the size of the padding and borders around the element (best to use).
One way to position elements on a page is to use the
float property which accepts common values such as
To prevent unwanted layouts when positioning using
clear property as well as containing can be used.
clear property accepts different values; commonly
leftclears left floats,
right, right floats and
both, left and right floats.
clear property should be applied to the element after the floated elements to return the HTML document to its ‘normal’ flow.
Containing floats is not an explicit CSS property. It involves literally containing the floats with, say, a class and self clearing the group (the class, that is) using the
:after pseudo elements. – This explanation maybe be a bit vague, but this process, according to the course, is also commonly known as a clearfix
Positioning can also be done using the
display property with the
Elements can also be uniquely positioned using the
Every HTML element, by default, has a
position value of
static, which can be overwritten with the
absolute in conjuction with the box offset properties –
top – gives one the ‘power’ to uniquely position a portion of the HTML document anywhere on the page.
Prior to reading this section of the course, I was already pretty well-versed most of the concepts presented in this lesson. Properties like
line-height, and most css properties that have to do with manipulating the look of text on a html page are not foreign to me.
A few properties/elements/concepts that were strange to me are bulleted below:
<cite>: to reference a creative work, author or resource.
<q>: for short inline quotes.
<blockquote>: for longer quotes.
Adding a background color to a HTML page can be done fairly easily by using the
background CSS properties.
background-imageCSS properties. However to modify and/or properly define a setting for the background image, the following properties can be used:
Gradient backgrounds can either be
radial. They are added to a HTML document using the
background-image CSS properties.
Linear gradients can be added using the
linear-gradient() within the
background-image CSS property. The function accepts two color values (Hex, rgba, hsla values). The first color value passed is the begining color value of the gradient and the second color value, the end color of the gradient. transition between the two color values within the gradient is handled by the browser.
Generally the color transition in a gradient occurs from top to bottom, but that can be changed using keywords within the gradient function value. Keywords such as
to left top,
to right bottom, and degree values such as
270 can be used.
linear-gradient() function, there’s also the
radial-gradient() function for Radial background gradients accepts values similar to the
start attribute used in an ordered list can be used to define at what point (e.g. number) the list starts from. For example
<ol start="20"> creates a list where the first
<li> starts with the number 20 and progresses onward (i.e. 20, 21, 22, …).
Also an attribute for
reversed attribute, used like so;
<ol reversed> turns the count into a ‘count-down’. (i.e. 5, 4, 3, …).
<ol>s, there’s also the
value attribute used like so;
<ol> ... <li value="3"></li> ... </ol>; which specifies the particular value for that
<li>s following a
<li> with a defined value would continue chronologically. For ex., say an
<li> was given a
value of 69, the next
<li> would automatically have the
value of 70 even if the
value before the defined
value was, say, 21.
Lists can be nested within each other.
list-style-typeCSS property can be used to modify the default
Images can be added to a HTML page using the
<img> inline HTML element.
Images, although appearing as inline elements by default in HTML pages, are usually set to a CSS
display property value of
<audio></audio> HTML element, introduced in HTML 5, can enable one to add audio files to the HTML webpage.
Attributes accepted by the
<audio> element include:
src: like with the
img element, the
src attribute specifies the source URL of the audio file, whether local or otherwise.
loop above are known as “Boolean attributes”. They, according to the textbook, “don’t require a stated value”.
<audio>, by default, would not be visible on the webpage even when present. When the
autoplay attribute value is present, the
srced audio file starts playing in the background on page-load albeit an “audio player” not visible on the webpage.
If, however, the
controls attr. is added to
<audio>, the player would become visible on the webpage having the default browser audio control properties: pause/play, seek, vol. up/vol. down.
loop attr., while present, causes the audio file to play continuously from begining to end while the webpage is open.
preload attr. accepts the values:
none (preloads no information),
auto (preloads all information), and
metadata (preloads metadata information).
Another format used to embed audio to HTML pages involves including more than one source URL. This is mostly done to provide an array of file formats so at least one of the formats would be recognized by the browser. To use this format, a few things change in the syntax. Instead of:
<audio src="file.mp3" autoplay controls></audio>
We now have:
<audio autoplay controls> <source src="file.ogg" type="audio/ogg"> <source src="file.mp3" type="audio/mpeg"> <source src="file.wav" type="audio/wav"> </audio>
<audio>element introduced in HTML 5, there’s also the
<video>element which works similar to the audio element, but this time adds video to the HTML page. For example:
<video src="earth.ogv" controls></video>
Apart from the similar attributes such as
loop which the
<video> attributes both use, there’s also the
poster attribute, which is specific to
poster attr. allows one to specify an image to be used as something like a “placeholder” before the video starts playing. Think of it like a “video thumbnail”. Usage is as follows:
<video src="some-video.ogv" controls poster="some-thumb.jpg"></video>
<video>can also be written in the following form/syntax (using multiple
sources) which allows room for the provision of fallbacks in case a specific browser (looking at you IE) doesn’t, for some reason, support your ‘default’ video format:
<video controls> <source src="some-video.ogv" type="video/ogg"> <source src="some-video.mp4" type="video/mp4"> Some text specifying the video's <a href="#">download link</a> </video>
Another important HTML element to note is the
<iframe>, when used, embeds another HTML page into your HTML page.
<iframe>s can be used to embed media files such as maps, videos and images from other sites into your webpage.
A few default styles every
<iframe> possesses which can be manipulated ‘to taste’ as HTML attributes includes:
<iframe src="some-url" frameborder="some-value" width="some-other-value" height="yep-more-values"></iframe>
A few final important things to note about
<iframe>s (for now):
Links within the page href-ed within the
<iframe> will open inside that frame leaving the page containing the frame unchanged.
Styles applied to the page containing the frame would not affect the elements in the
<iframe> elements play by their own rules (the rules specified at
And two more tags before this lesson ends:
These semantically markup self-contained content or media within the HTML Page. They are used like so:
<figure> <img src="some-image.jpg"> <figcaption>caption used in place of image alt</figcaption> </figure>
<form></form>element is used and it element accepts different attributes, two of which include:
action: contains the URL to which information contained within the form would be sent.
method: specifies the “method” the browser should use for sending the information collected from the form to the server for processing.
For gathering text inputs from users the following elements and attributes are applicable:
<input>: A self-closing HTML element which uses a
typeattribute to note what kind of information is to be collected by the form field.
name: a second common attr. used together with
<input>which specifies the name of the control being collected by that text field.
To tie these all together, here’s an illustration:
<input type="text" name="username">
text value parsed into the
type attribute above, some other ‘useful’ values (mostly introduced by HTML 5) include:
So say, for example, I was trynna get the email, date of birthday and telephone number from a user, my HTML form would have 3 input fields like so:
<form action="#" method="post"> <input type="email" name="useremail"> <input type="date" name="userdob"> <input type="tel" name="usertel"> </form>
Apart from the above discussed method of capturing ‘text’ input from the user, there’s also the
<textarea></textarea> way. This is mainly used for collecting text which span multiple lines and unlike the
<input> element, this one doesn’t use the
type attribute, just
<textarea> element to a HTML page is done like so:
<textarea name="userstory">Some Placeholder Text</textarea>
<select><option> ... </option> ... </select>
<select multiple> ... </select>
Let’s discuss each one and show their corresponding syntax.
nameattributes, a radio input also features a
valueattribute and a
checkedpreselects a specific radio input. The syntax is as thus:
<input type="radio" name="month" value="June" checked> June <input type="radio" name="month" value="July"> July <input type="radio" name="month" value="August"> August
One important thing to note in the syntax is that for a group of radio buttons must have the same
name value (like
Check Boxes are very similar to Radio buttons only that they give the user the capability of selecting more than one option at a time. Syntax:
<input type="checkbox" name="food" value="None" checked> None <input type="checkbox" name="food" value="Egg"> Egg <input type="checkbox" name="food" value="Fish"> Fish <input type="checkbox" name="food" Value="Meat"> Meat
<select name="gender"> <option value="None" selected>None</option> <option value="Male">Male</option> <option value="Female">Female</option> </select>
multiple boolean attribute to the
<select> element enables multiple selection for the user.
To submit a form, the
submit input (see below) is used.
<input type="submit" name="submit" value="Send">
Here, the value parsed into the
value attri. specifies the text that’ll be on the submit button.
Other inputs include:
<input type="hidden" name="tracking-code" value="some-value">
<input type="file" name="file">
For organizing form elements,
legend are used so forms created can be more meaningful to the user.
label provides captions or headings for form controls. e.g.
... <label> <input type="checkbox" name="month" value="April"> April </label> <label> <input type="checkbox" name="month" value="May" checked> May </label> <label> <input type="checkbox" name="month" value="June"> June </label> ...
fieldsetgroups form controls and labels into organized sections. E.g.
... <fieldset> <label> ... </label> ... </fieldset> ...
legend provides caption (or heading) for
Even more form and input attributes include:
disabled: A boolean attribute which disables an input field. I.e. renders the field inaccessible to the user.
placeholder: accepts a value which serves as a, wait for it, placeholder for the form controls.
required: Another boolean attribute which makes sure a control is filled before submitting.
e.t.c. (check MDN for more please.)
Tables, in general, comprise data which is contained in columns and rows. To create a table in HTML, the following elements are required:
<tr>: table row,
<th>: table header,
<td>: table data
A ‘general’ format for HTML tables follow this:
<table> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> <tr> <td>Text 1.1</td> <td>Text 1.2</td> <td>Text 1.3</td> <td>Text 1.4</td> </tr> <tr> <td>Text 2.1</td> <td>Text 2.2</td> <td>Text 2.3</td> <td>Text 2.4</td> </tr> <tr> <td>Text 3.1</td> <td>Text 3.2</td> <td>Text 3.3</td> <td>Text 3.4</td> </tr> </table>
To provide more context, the
scope attr. may be used within
<th> to identify exact what content (row/column) the
<th> is applicable to.
scope accepts the following values:
To organize the data on the table and its structure, the following elements are used:
<caption>Some text here</caption>: provides caption or title for the table.
<thead> ... </thead>: wraps the heading row to denote the head.
<tbody></tbody>: contains primary table data.
<tfoot></tfoot>: use your fucking imagination for what this does.
Putting together what we’ve looked at so far, we have:
<table> <caption>Placeholder Text</caption> <thead> <tr> <th> ... </th> ... </tr> </thead> <tbody> <tr> <td> ... </td> ... </tr> ... </tbody> <tfoot> <tr> <td> ... </td> ... </tr> ... </tfoot> </table>
rowspan attr. used within
<td> can be used to combine multiple cells in columns or rows. I.e. A cell with a
colspan value of 3 (
colspan="3") would span 3 columns.
For styling tables with CSS, the following properties would come in handy:
border-spacing: only works when
More table styling stuff to take note of:
vertical-align only works with
table-cell elements. Using it with
block or other element levels won’t work.
vertical-align accepts an array of values, a few of which include;