Web Programming Studio Notes

Week 1 - Day 2

2.1: HTML document structure

HTML, elements, and tags

HTML (HyperText Markup Language) is a textual language for creating webpages. The HTML acronym highlights the three main characteristics of webpages:

An element is the combined total of an opening tag, a closing tag and the contents in between

If an element does not require a closing tag such as 

<br>
or 
<img>
it is called a Void Element

HTML Document

The HTML Living Standard, produced by WHATWG, defines the minimal parts of a HTML document:

  1. The 
    <!DOCTYPE html>
    declaration instructs the web browser about what type of document follows.
  2. The 
    <html>
    element encloses everything but the 
    <!DOCTYPE html>
    declaration. 
    <html lang="en">
    indicates that the document's language is English.
  3. The 
    <head>
    element contains the document title, document metadata, and various other elements that are typically not displayed in the webpage.
  4. The 
    <meta>
    element specifies metadata, which is data that describes the document's data. 
    <meta charset="UTF-8">
    describes how characters are represented in the HTML document. Additional 
    <meta>
    tags may be used to indicate when the document was saved, who the author is, etc using the syntax
    <meta name="author/description, etc:" content="what you want to put there">
  5. The 
    <title>
    element specifies the document's name. The title is usually displayed in the browser's titlebar, is used by search engines, and is used for bookmarking.
  6. The 
    <body>
    element encloses all elements and content to be rendered in the browser.

The opening <html> tag uses an attribute to indicate the webpage's language, and <meta> uses an attribute to indicate the character set. An element attribute provides additional information about the element and is included only in the opening tag. An attribute has a name and a value, specified using the form: name="value". Ex: <meta charset="UTF-8"> has an attribute named charset with value "UTF-8".

HTML validator

You can use the HTML validator (W3C) in order to check to see if your HTML document follows the standard conformance.

Exploring further:

2.2: Basic HTML elements

Elements

Purpose

Example HTML

h1, h2, h3

Headers. h1 is largest. 

<h2>Puppies are cute</h2>

p

Paragraph 

<p>Humans seem designed to see puppies as cute.</p>

em, strong

Emphasis (italic), strong emphasis (bold)

 
When in <strong>doubt</strong>, tell the <em>truth</em>" -Mark Twain

img

Image 

<img src="https://resources.zybooks.com/WebProgramming/ducativ1.jpg" alt="Bike photo">

a

Link

 
<a href="https://www.wikipedia.org/">Click Here</a>

br

Creates a line break, can be stacked to create multiple new lines

 
<p>This is the first line of text <br>This is the second line of text</p>

section

Creates a section to organize documents

 
<section><h2>Heading</h2><p>...</p></section>
Element HTML example Rendered Semantics
em emphasis emphasis Emphasized text
cite cite cite Title of a work
strong strong strong Important text
mark mark mark Marked or highlighted text
var variable variable Definition of a variable in a computer program
kbd keyboard keyboard Keyboard input
code code code Computer code
samp sample sample Sample output from a computer
b bold bold Bold text
i italic italic Text of an alternate voice or word from another language
u underline underline Text that is rendered differently from normal text

Exploring further:

2.4: Lists

Unordered Lists

Unordered lists are created using the <ul> element, with each item in the list being denoted by a <li> Element </li>. The style of lists can be changed using CSS

Ordered Lists

Ordered lists are created in the same way as unordered lists except for having a <ol> instead of a <ul>. The numbering system can be changed with the type attribute

Nesting

Lists can be nested within eachother however you should take care to use the proper formatting when doing so in order to prevent the lists breaking

Exploring further: