By the end of this tutorial you will have your own portfolio written using HTML
What are we going to learn by the end of this tutorial :
- introduction to HTML
- HTML Tags :
++ Basic Tags
++ More advanced Tags
- HTML Document Structure
- Let's create our portfolio
1- introduction to HTML
HTML (Hypertext Markup Language ), is the code we use to display text, images, links in the web browser to create webpages using predefined tags ..
"Hypertext" refers to the hyperlinks which allow us to travel from page to page
"Markup language" refers to the way tags are used to define the page layout and elements within the page (The content)
2- HTML Tags
Tags are responsible for defining the structure on an HTML page, including the placement of text and images and hypertext links. HTML tags begin with the less-than (<) character and end with greater-than (>). These symbols are also called "angle brackets."
Many elements have an opening tag and a closing tag — for example, paragraph element has a <p> tag, followed by the paragraph text, followed by a closing </p> tag.
Some elements don’t have a closing tag. These are called empty elements. For example, the br element for inserting line breaks is simply written <br>.
<p>tag defines a paragraph.
this will give us :
<h6>are different sizes of heading
<h1>will give us the largest font size and of course
<h6>will give us the smallest font size
<b>: this tag will change the font-weight to bold example :
<br>tag inserts a single line break, and it doesn't need to be closed like the previous tags ( we will talk about different types of tags later )
<i>: The content of the
<i>tag is usually in italic.
More advanced Tags
<img>tag defines an image in an HTML page and it requires 2 attributes :
src: Specifies the URL of an image
alt: Specifies an alternate text for an image
<a>tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the
hrefattribute, which indicates the link's destination.
<ul>tag defines an unordered (bulleted) list.
<ol>tag defines anordered (numbered) list.
<li>tag defines a list item.
I think that's enough for the examples, we will see more Tags when we start building our portfolio
3- General HTML structure
An HTML file start with the
<!DOCTYPE html>< html > and end with
< /html > container tag. Inside the
<html> goes the
<head></head> and the
<head>element can include a title for the document, scripts, styles, meta information, and more. example :
<head> <title>Repl.it -Repls</title></head>to create the title of the web page
<body>element contains all the contents of an HTML document, such as text, hyperlinks, images, lists, paragraphs ....