HTML quick start
We won't need the phone for now. Create a directory(folder) on your computer. In said folder, we'll create a plain text file with a text editor of your choice. The file should be named index with the file extension html in this file we'll write our HTML.
Intro to HTML
Before we get started; what is HTML? HTML or Hyper Text Markup Language is a language for “marking up” meaning “this text here is a subtitle” or “this text should be emphasised” - stuff like that. HTML is used to determine the content of a webpage, and later well use CSS to determine how this content looks.
Tags
If you’ve ever seen HTML you may have noticed a lot of things go in between < and > signs. We call these tags. First well look at the opening and closing tags:
<em>toast</em>kiwi
Notice how there is a forward slash in the second em tag, this indicates a closing tag, the first em is an opening tag. Everything in-between the opening and closing tags is affected by the tag. So in this example ‘toast’ is affected by the em tag and ‘kiwi’ isn’t.
Some tags you can use:
em
this stands for emphasis, this will by default render the text as italic
strong
this is used for text which is strongly important, this will by default render the text as bold.
h1
this stands for header 1, this is the largest type of header. There are also tags h2 all the way through h6. They get progressively smaller and are used for subheaders or subtitles. By default, this will render as bold, large text on its own line.
p
this stands for paragraph
ol and ul
these are ordered list and unordered list. Meaning numbered or bulleted. Inside the list each item should be within an li list item tag. See example;
<ul> <li>item one</li> <li>item two</li> <li>item three</li> </ul>
div this stands for division, this is used to organise more complex html into sections. We will use this more once we get to css.
a With the a, or anchor tag, we introduce something called HTML attributes which are certain traits a tag can have, HTML attributes go inside of the opening tag. According to the following syntax ATTRIBUTE=“VALUE” well look at an example of a link;
<a href="http://example.com">Click Here</a>
in this example you’ll see the a tag followed by href which stands for hyper reference. Then in quotes we see the link of the webpage the link will lead us to. Then before the closing tag we see the text ‘click here’, this will be the text that the viewer sees on the webpage and is rendered by default underlined, and blue.
Stand alone tags
Before we discussed opening and closing tags, stand alone tags are slightly different. They don’t require closing tags.
br
br inserts a line break, the same as pressing enter on your keyboard on a text editor.
img
the img or image tag is used to display -you guessed it- images. This has the important attribute src, which should contain the URL of the image as its value. You can also have ‘width’ and ‘height’ attributes to determine the size of the image, these are specified in pixels. See the following example;
<img width="100" height="100" src=“https://logo.png”>
Okay, but how do you structure a html page;
All HTML documents have to start with a special line that declares that the document type is HTML. This line looks a bit like a tag, but it’s actually not an HTML tag, it’s a “declaration”. It tells the web browser what type of document it is, in this case, HTML.
<!DOCTYPE html>
Next the entire document is enclosed within html tags. Within this our page is split in two parts which are the head and body tags.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Inside the head, we place information about the page which isn’t directly visible on the page. One such tag is the title tag, which controls the text displayed in the top of the browser tab.
Inside the body is where our actual visible HTML elements go. This is where we can write paragraphs of text, titles with the h1 tag, and more.
<!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h1>welcome to my website</h1> <p> thanks for visiting> </body> </html>