HyperText Markup Language

HyperText Markup Language (HTML) is used to lay out the structure of a webpage.

HTML is made up of tags.

  • Tags generally come in pairs, with data being in between the tags.
  • Tags are indented to help visualize their hierarchy, but any indentation is purely stylistic.
  • Tags can also have attributes, which are data fields, sometimes required and sometimes optional, that provide additional information to the browser about how to render the data.

We will explore some common tags below.

Basic structure

  • <!DOCTYPE html> is placed at the start of an HTML file to indicate to the browser that HTML5 is being used.
  • <html></html>: contents of website
  • <head></head>: metadata about the page that is useful for the browser when displaying the page
  • <title></title>: title of the page
  • <body></body>: body of the page
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    
  </body>
</html>

Basic tags

Explore the CodePen below for basic HTML tags and their effect.

See the Pen HTML Basic tags by Ali Madooei (@madooei) on CodePen.

Lists

  • <ul></ul>: unordered list
  • <ol></ol>: ordered list
  • <li></li>: list item (must be inside either <ul></ul> or <ol></ol>)

See the Pen HTML List tags by Ali Madooei (@madooei) on CodePen.

  • <a href="path/to/hello.html">Click here!</a>: link to hello.html, some URL, or some other content marked by id by passing #id to href
  • <img src="path/to/img.jpg" height="200" width="300">: image stored at src attribute, which can also be a URL
    • note that this is a single tag without an end tag
    • both height and width are optional (if one is omitted, the browser will auto-size the image), and can also take a percentage: height=50% to automatically scale the image to a certain portion of the page

See the Pen HTML img tag by Ali Madooei (@madooei) on CodePen.

Table

  • <table></table> : table
  • <tr></tr>: table row (must be inside <table></table>)
  • <th></th>: table header (must be inside <td></td>)
  • <td></td>: table data (cell) (must be inside <td></td>)

See the Pen HTML table tag by Ali Madooei (@madooei) on CodePen.

Forms

You can create forms in HTML to collect data; we will explore this later. Here is a CodePen for illustration of some basic form tags:

See the Pen HTML Basic form tags by Ali Madooei (@madooei) on CodePen.

div and span

Two special tags allow us to break up a our webpage into sections:

  • <div></div>: vertical division of a webpage
  • <span></span>: section of a webpage inside, for example, text

Both <div></div> and <span></span> don't really do much by themselves, but they allow for the labelling of sections of a webpage.

Different sections of a webpage can be referenced with the id and class attributes. ids uniquely identify elements, but there can be an arbitrary number of elements with a given class.

DOM

The Document Object Model is a way to conceptualize webpages by representing them as an interconnected hierarchy of nodes. In HTML, the nodes of the DOM would be the different tags and their contained data, with the <html></html> tag being at the very top of the tree. While this might seem a little unintuitive at first, this model will become very useful in the future.

See the Pen HTML DOM by Ali Madooei (@madooei) on CodePen.

You will find a wealth of resources on HTML (and Web Development in general) at MDN Web Docs and W3School.

Cascading Style Sheets

Cascading Style Sheets (CSS) is a language used to interact with and style HTML, changing the way it looks according to a series of rules. CSS is what makes websites look nice.

CSS can be applied to HTML in a variety of ways:

  • The inline style attribute: 

    See the Pen Inline CSS by Ali Madooei (@madooei) on CodePen.

  • The internal style defined inside <style></style> tags, inside the <head> section of HTML.

    See the Pen Internal CSS by Ali Madooei (@madooei) on CodePen.

    The CodePen above is styled with the following:

    <style>
  div {
    color: blue;
  }

  #danger {
    color: red;
  }

  .highlight {
    background-color: yellow;
  }
</style>

  • A separate .css file:

    • add <link rel="stylesheet" href="path/to/styles.css"> to the header,
    • move the CSS code (same format as used inside the <style></style> tags.

    This is often an even better paradigm because it separates two distinctly different things: structure (HTML) and style (CSS), while also being easier to manage and read.

CSS Selectors

CSS selectors are used to select different parts of an HTML page to style in particular ways. In the above example, div, #danger and .highlight are CSS selectors (to select all div elements, the element with id="danger and all elements with class="highlight", respectively.)

Here are some fancier ways to work with the selectors:

  • Select h1 and h2 elements

    h1, h2 { 
  color: blue; 
}

  • Select all p elements inside an element with class="note" 

    .note p { 
  color: blue; 
}

  • Select all input fields with the attribute type=text

    input[type=text] { 
  color: blue; 
}

Here it gets even fancier:

  • Add two # before all h2 elements:

    h2::before { 
  content: "##"; 
}

    before is called a pseudo-element!

  • Change the color of a button when the cursor is hovering over it.

    button:hover { 
  background-color: gray; 
}

    hover is called a pseudo-class!

CSS Properties

Here are some common CSS properties:

background-color: teal; 
color: blue; /* sets the content (text) color */
/* color can be one of ~140 named colors, or a hexadecimal value that represents an RGB value */ 

text-align: left; /* other possible values are center, right, or justify */

height: 150px; /* sets the height of an area */
width: 150px; /* sets the width of an area */
/* arguments in pixels often can take a percentage or relative values too */

margin: 30px; /* sets the margin around all four sides of an area */
/* margin also be broken up into "margin-left", "margin-right", "margin-top", and "margin-bottom" */
padding: 20px; /* sets the padding around text inside an area */
/* padding be broken up the same way as "margin" */

border: 3px solid blue; /* sets a border around an area */

font-family: Arial, sans-serif; /* sets the font family to be used */
font-size: 28px; /* sets the font size */
font-weight: bold; /* sets the font weight to quality, a relative measure ("lighter"), or a number ("200") */

There are lots of CSS properties that can be used in a lot of different ways. Check out the wonderfully extensive documentation for more information.

Libraries and Frameworks

There are several libraries and frameworks out there which you can use, for free, by including a few files in your project. These libraries will make it easy for you to design slick and professional-looking applications.

Refer to this excellent list of CSS frameworks.