Basic Web Technologies

HTML

Any nouns on a webpage are typically html (i.e. that block of text, that image etc.)

What Does HTML Do?

HTML is a markup language, this means it's only job is to say how data should be organized. None of the data processing takes place in HTML

How do you write HTML?

HTML is a collection of tags and attributes, tags are the most general way of saying how you want something to appear and attributes set special behaviors for tags

Each tag has an opening tag (<tag>) that is two angle brackets with the tag name inside. Followed by the content of the tag (i.e. some text), and finally the closing tag which is the same as an opening tag with a forward slash (</tag>)

Any attributes are added in the opening tag before the second angle bracket; <tag attribute='value'></tag>

HTML Example

<p>This html gives you regular text</p>
<h6>and this html gives you larger text</h6>

Here are some common HTML tags

But first, if you ever see <!-- some helpful text --> this is a comment in HTML it's just there for your benefit the browser ignores it

Heading Tags

Heading tags are used to create larger text, they are a h with a number and get smaller as the number gets larger

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

Paragraph Tags

Paragraph tags are used to create smaller sized text and typically contain longer content, they are denoted with a p

<p>paragraph tags</p>

Also emphasis (<em>) and strong (<strong>) tags can be put inside paragraph tags to add italicization and bolding

Likewise anchor tags (<a>) can be used to add links in text (with a href attribute); <a href='https://google.ca'>google</a> gives you: google

List Tags

You can make a bullet point (unordered) and/or numbered (ordered) list in HTML using the ul and ol tags with list item (<li>) tags inside
Example:

<ul> 
<li> A </li>
<li> B </li>
</ul>

<ol> 
<li> C </li>
<li> D </li>
</ol>

Divider Tags

Divider (usually called div) tags are used to organize other groups of tags together, for example all the text in this slide is inside a <div>

Some people also use section tags; <section> to do a similar thing. These slides actually use a section tag with a div inside it:

<section class='bg-facebook'><!--The bg-facebook thing is not part of HTML it's part of what i'm using to make these slides-->
  <div>    
    <h2><strong>Divider Tags</strong> </h2>
    <p> Divider (usually called div) tags are used to organize other groups of tags together, for example all the text in this slide is inside a <div> </p> 
    <p> Some people also use section tags; <section> to do a similar thing. These slides actually use a section tag with a div inside it:</p> 
    ...
  </div>              
</section>

Image Tags

Last but not least are image tags, these are special tags because they don't need to be ended and all they need is a src attribute with a path to the image you want to use (also width and height are useful attributes)

<img src='./path/to/image.png' height='300px' width='300px'>