What do you need to know when starting as a front-end programmer?
Have you ever wondered how a website is made? If your answer is yes, welcome to your article! Here you learn the basic knowledge about HTML.
1. Introduction
What does HTML mean? This name is the acronym of HyperText Markup Language.
To start, you need a computer, obviously, a word processor such as Notepad, Wordpad, Simple Text, it depends on your operating system, and a browser like Mozilla Firefoxz, Internet Explorer, Opera or Chrome.
2. Tags
First of all you have to create a document and save it with the .html extension.
The tags serve to create your structure The tags begin with a less-than sign: < and end with a more-than sign >. Always. Inside the signs goes the tag. Example:
The tag for header element with more relevance is h1: <h1> header element </h1>.
Most of tags need a begin and end tag. You can also use multiple tags to alter text. But just make sure to begin and end both. Example:
<strong><em>Strong and emphasis</strong></em>
There are also tags that do not need closing, for example the tag <br>. This tag breaks the text and starts it again on the next line.
Main Structural Labels
An html file has a basic structure. You start with the tag <!DOCTYPE html>. This tag tells the browser the html version. Then we will use <html> , this denotes that this is an HTML document. Inside the html tag you will put <head> and <body> tags. before closing the head tag you will write two tags: <meta charset = “”> that tells the browser what character set you used when saving the file and the title of the page, within the title tags <title></title>.Inside the body tag will go the structure of your document. First you will put <header>, that provides introductory information. Then the <main> tag that represents the main content of the body of a document and finally <footer> which is the foot of our document. Finally, you’ll end every page you write with this tag: </HTML>.
The structure will look like this:
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8">
<title></title>
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
3. Text
Heading
Depending on the size and importance of the header we will use one command or another. There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest.
Paragraph
The paragraph is indicated with the <p> tag:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>.
List of items
To make lists of elements we have 2 forms. If we want the numbered list we will use the <ol> tag and if we want it with a symbol in front of each <ul> element. Inside we will put the elements between the <li> tags.
<ol>
<li>Ordered HTML List</li>
<li>Ordered HTML List</li>
<li>Ordered HTML List</li>
</ol><ul>
<li>Unordered HTML List</li>
<li>Unordered HTML List</li>
<li>Unordered HTML List</li>
</ul>
Centering text
By default, the text appears on the left side of the screen. If you want to center the text you will have to use the css property “text-align: center;”.
This is what it looks like:
<p style = “text-align: center;”>
The text is aligned</ p>
Containers
We’ve others wich are used to do groups without semantics, they’re <div> and <span>.
The <div> tag is used to define a division or a section in an HTML document, it’s used as container for other HTML to style them with CSS. Otherwise, <span> is used for parts of the text.
Tables
An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag, and table header is defined with <th>. Table headings are bold and centered by default. A table data/cell use <td> tag.
Example:
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Clare</td>
<td>Jackson</td>
<td>44/td>
</tr>
</table>
4. Links
Even if there aren’t no external links on your website, you will always go to use the links in the online browsing of your site.
Links are written with <a> tag, and with the attribute href=””, which link to the site.
Example:
<a href”https://www.mywebsite.com”>My wesite</a>
We can do two types of links. Referrals to a page and archives, or to a position in the same page or in other page of your own site. This kind of links uses the special attribute id=””, but be careful! Make sure that you don’t have two elements with the same id.
Example:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8">
<title>My website</title>
</head>
<body>
<header id=”top”>
</h1>My page title</h1>
</header>
<main id=main>
<h2>Article 1</h2>
<p>Lorem ipsum dolor sit amet […]</p>
</main>
<footer>
<p><a href=”#top”></a>Go back up</p>
</footer>
</body>
</html>
You can use the id attributeatribute to link from any page of your site too.
<a href=”index.html#top”>Volver arriba</a>
5. Images
It’s unusual that you go to do a website that only contains text. Most articles include images. We calle images the pictures, graphics, or icons. You can turn an image into a link to another page.
To include an image you will always use the same format.
Example:
<img src=”image.jpg” alt”referal text”>
Elements
- SRC (source): It’s an attribute to telling the browser where to go to find the image. It’s recommended to use a subdirectory called “images” to place your image, this way it will be easier to write the subdir name like this: images/imagename.jpg
- ALT (alternate text): When the browser can’t find the image, it was display this text. It’s important to write this text for people who can’t view the pictures and screen readers. This text will be appear when you mouse over the image too.
Image to links
To convert a image to a links we will write a simply html code. First we place link code continued the image code.
Example:
<a href=”http://www.mywebsite.com><img src=”homepage.jpg” alt=”Home”></a>