Html Basics
Make sure you have Visual Studio Code installed along with any html preview extension. It's one of the most popular editors when working with web.
HTML is a hypertext markup language, which means that you can make interactive documents- websites. The usefulness for is in development is unriveled and it does not really have any competition. It doesn't even matter if you focus on backend- no- it doesn't even matter if you don't program at all- knowing HTML is a good skill to have regardless. Let's learn together by making a personal website!
HTML is just a text file. .html extension make that file to be read as such by the browser. There is no more magic. Exactly how HTML looks like will depend on a browser, but nowadays they are more or less consistent.
A tag make text look in a certain way. Every tag has a beginning and an end.
Tag has a name, for example MyTag.
It has a beginning
<MyTag>and an end
</MyTag>For example:
<MyTag>Tag content</MyTag>Is how you would render Tag content text within MyTag.
The below:
<MyTag>
Tag content
</MyTag>Is equivalent to the previous, single-line way of writing content in a tag. Tag capitalization does not matter. In fact, no matter how you format the text in the file, it will only change when you put it in a different tag or apply different styling.
For example, this:
<MyTag>
Tag
content
</MyTag>Is still equivalent to all the version from before.
Just like a book, a webpage has a title, subtitle, sub-subtitle and so on. Those are expressed through heading tags.
For example headings:
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<h7>H7</h7>
<h17>H17</h17>Render as:
H7 H17By default, headers are rendered in a separate line, in bigger font. The higher the number next to an h tag, the more important it is.
Why did H7 and H17 did not follow the rules of a heading? Have you ever seen a 17 levels deep subpoint? I haven't. In fact, the maximum heading level you can have is 6. Therefore, h7 or higher is not a valid HTML.
Paragraph tag <p> is used for organizing- you guessed it- the content of paragraphs. Avoid having text in html that does not belong to any tag. When in doubt- <p> tag is a good choice.
This <p> tag:
<p>
Hello world.
A lot of content.
</p>Will render as:
Hello world. A lot of content.
Since p tags usually have a lot of content in them (at least multiple lines), move the opening and closing end, the content itself all in a line of their own. Use a tab to separate content from the tags.
A comment is a kind of nameless tag <!---->. For example:
<!--This is just a comment-->Like all comments, this will not be rendered.
When it comes to bolding text, there are two options: <strong> and <b>. Though visually they look the same, logically they are used for 2 different things.
Use <strong> for text of greater importance.
<strong>Important text</strong>Important text
Use <b> to simply draw attention, without any significance in extra importance.
Yes, it is a good, but it might <b>not always</b> be that way.Yes, it is a good, but it might not always be that way.
Similar to bold, italics can be applied in 2 different ways too: either <em> or <i>.
Use <em> to give a spoken emphasis to a part of a sentence.
I <em>think</em> you should avoid going outside today.I think you should avoid going outside today.
Use <i> for words with special meaning.
<i>King's Landing</i> is a fictional place in <cite>Game of Thrones</cite>.King's Landing is a fictional place in Game of Thrones.
Please note the use of <cite> as well. It's used for titles of creative work.
<u>Important text 2</u>Important text 2
<s>No longer true, wrong</s>No longer true, wrong
Sometimes, it might be useful to add an extra line between lines. This can be done using a <br> tag. However, don't add a line when there is one already- different html elements usually put some space in between them.
For example, this is an overkill:
<p>Paragraph 1</p>
<br>
<p>Paragraph 2</p>However, when talking about a paragraph, we might want to control when to place a new line.
For example, a poem is the same paragraph. If we do:
<p>
I study html,<br>
Holding a bell,<br>
I mindfully read,<br>
-All is well.
</p>It will be rendered as:
I study html,
Holding a bell,
I mindfully read,
-All is well.
Also, it's worth mentioning that some elements, just like
, don't have to be followed with a closing tag- they can be a single tag too.
Hyperlink is a special text which contains an embedded url inside it. Clicking on that url will redirect us to a new page (or a section). To make text hyperlink we use an <a> tag.
For example:
<a>link text</a>Renders as:
link text
What happens when we click on a link? Nothing. Huh? Didn't we say that hyperlink is supposed to redirect is someplace else? Where?
We need to provide supply link text with a url it links to. Introducing- html attribute.
An Attribute is a property inside an html element. It supplements the element with some metadata. In our case, we can use an attribute to provide a url to which link text point:
<a href="https://www.google.com/">link text</a>Clicking it will now take us to google.com.
Link can be also used to point to a specific part of a page. Such a link is called an Anchor. Use an identifier of a tag and point to it in a link using #.
For example, <a href="#top"> will point to any tag that has id="top". For example to <p id="top"></p>.
List is something that contains many items within itself. Each item in the list will have a consistent formatting. There are two types of list: ordered and unordered.
Unordered List has a <ul> tag.
Ordered List has a <ol> tag.
List Item has a <li> tag. This tag only works when nested inside either of the two list tags.
For example unordered list:
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
<li>Fith list item</li>
</ul>Renders as:
- First list item
- Second list item
- Third list item
- Fourth list item
- Fith list item
Ordered list:
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
<li>Fith list item</li>
</ol>Renders as:
- First list item
- Second list item
- Third list item
- Fourth list item
- Fith list item
Table is an element similar to a list, because it requires more elements within it. Here are the tags involved in a table:
<table>- root table element;
<tr>- row, must appear inside <table> root;
<td>- must appear inside <tr>.
For example:
<table>
<tr>
<td>Col 1 name</td>
<td>Col 2 name</td>
</tr>
<tr>
<td>Item at row 1, col 1</td>
<td>Item at row 1, col 2</td>
</tr>
<tr>
<td>Item at row 2, col 1</td>
<td>Item at row 2, col 2</td>
</tr>
</table>Renders as:
| Col 1 name | Col 2 name |
| Item at row 1, col 1 | Item at row 1, col 2 |
| Item at row 2, col 1 | Item at row 2, col 2 |
Image can be placed on a page using an img tag.
For example:
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">Will display:
Once again, we use src- another attribute, specific to image this time to specify what image we want to render. There are a few other important image attributes.
alt- describes an image when hovered over it. Sometimes image can fail to load, but seeing a descriptiong instead makes it slightly less bad. In other cases- people simply have a disability to read and we should take that in consideration as well.
Let's say we have an invalid img src:
<img src="this does not exist" alt="Dummy image">Instead of an image, we can at least see a description:
We can change the image size by using width and height attributes. Width is the main one- height adjusts to it.
For example:
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width=50px>Renders a proper, but small logo of Google:
However if you specify both width and height, you need to be careful not to mess up the size:
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width=50px height=50px>That's one ugly logo :)
There are multiple units of size to choose from.
- px- pixel (1/96th of an innch)
- mm- milimeter
- cm- centimeter
- in- inch (2.54 cm)
- ...
- %- proportion
- em- how many times bigger compared to a font of the current element
- rem- how many times bigger compared to a font of the root element
- ...
For example, this image appear above the logo.
<p>By happy, by mindful. Love the life.</p>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width=50px>By happy, by mindful. Love the life.
How to place both in the same line? We can nest an image inside the paragraph:
<p>
By happy, be mindful. Love the life.
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width=50px>
</p>And see this:
By happy, be mindful. Love the life.
Congratulations! You know the basics of HTML!
In the next lesson- CSS, we will learn how to style the page.
The act of going through your code, line by line is called debugging. Debugging is not unique to language like C#, you can debug your HTML code as well, however we will be using a different technique.
There are 2 ways of debugging HTML code.
Every modern browser has developer tools embedded into them. In case of Chrome, if you hit f12, a new section will appear with a bunch of tabs. What we care about is the Elements tab.
The problem with HTML is that if it does error- you will still be able to see your full page. The problem- you won't see it the way you want and it might be difficult to find the spot that made it bad. The tool that exposes all HTML errors is HTML Validator- https://validator.w3.org/
- What is tag and why do we need it?
- What is html?
- How to render a:
- Table?
- List?
- Image?
- Hypertext?
- Bolded text?
- What is an attribute on html element?
- How to scale image relatively?
- Which one is more important: h1 or h6?
- What happens if you render h17 tag?
- How to debug HTML?
Create a webpage about yourself, using as many HTML elements all html elements from this lesson.