Learn to Code via Tutorials on Repl.it!

← Back to all posts
By the end of this tutorial you will have your own portfolio written using HTML
khoubaib99 (7)

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>.

Basic Tags

  • <p> :The <p> tag defines a paragraph.
    example :

this will give us :

  • <h1> to <h6> : <h1> to <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

result :

  • <b> : this tag will change the font-weight to bold example :

result :

  • <br> : The <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 )

example :

result :

  • <i> : The content of the <i> tag is usually in italic.

example :

result :

More advanced Tags

  • <img> : The <img> tag defines an image in an HTML page and it requires 2 attributes : src and alt.
    • src : Specifies the URL of an image
    • alt : Specifies an alternate text for an image
      example :

result :

  • <a> : The <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 href attribute, which indicates the link's destination.

exapmle :

result :

  • <ul>, <ol> and <li> :
    • The <ul> tag defines an unordered (bulleted) list.
    • The <ol> tag defines anordered (numbered) list.
    • The<li> tag defines a list item.

example :

result :

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 <body></body> tags.

  • <head> : 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> : The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, lists, paragraphs ....

So, your HTML files basically must look like this (before adding content inside <head> and `<body>' ):

Time for the fun part : Let's build a simple HTML portfolio, i will instruct you via comments that i will leave in the Repl.it IDE ... enjoy
Eduardonila (1)

Great tutorial , simple , clear and you learn a lot in a few moments thank you dude

AdCharity (1264)

ok what happened to my CSS gimme my CSSSSSSSSSSSS

Highwayman (1322)

@AdCharity it’s in the style tags.

AdCharity (1264)

@Highwayman Ik but 1. It’s inline 2. It’s not a whole lot

Highwayman (1322)

@AdCharity yeah I know, but at least it’s something.
Maybe if he stuck it in a separate file and actually explained it.
*cough cough khoubaib99 cough*

HiraAmin (0)

how do you get the url of the image?

theangryepicbanana (1604)

uh that doesn't look finished?

Zavexeon (1034)

@khoubaib99 I'd put something like "Under Construction" or "In Progress" in the title, then. :)