Start Your Developer Journey Building Your Portfolio - HTML BASICS
PART II - HTML BASICS
This is the second of a series of lessons to help you on your journey to being a developer without a computer science degree. Start here for an understanding of how we got here.
In this lesson, we will be covering the basics of HTML. Understanding HTML is necessary for anyone interested in web development, because it is the backbone of every web page on the internet.
HTML is the standard markup language used to create webpages. Since we are creating our portfolio, that will be made of one or more webpages, we will need to learn HTML.
HTML stands for HyperText Markup Language.
CONCEPTS
HTML documents are composed of:
Tags: which usually come in pairs e.g. <p></p>. In this example, <p> is the opening tag and </p> is the closing tag.
Elements: which are different parts of a webpage and they are formed with tags. e.g. <p>This is a very short paragraph. It is used to display a paragraaph element for an HTML page</p>. Elements can be nested into other elements
Attributes: provide additional information about an element. Attributes are always specified in the opening tag. e.g. <p class="shortText">This is a very short paragraph. It is used to display a paragraaph element for an HTML page</p> The class attribute allows you to assign a specific class name (shortText in this example) to an element.
Document Structure: An HTML document has a hierarchical structure. The outermost element is <html>, and it contains two main elements: <head> and <body>. The <head> includes information about the page that is not usually seen by the users of a webpage but helps in the serving of the page. The <body> element contains the visible content of the webpage.
STRUCTURE
<!DOCTYPE html>
<html>
<head>
<title>Title of the Webpage</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<img src="image.jpg" alt="Description of the image">
<a href="https://www.example.com">Link</a>
</body>
</html>
The breakdown of the structure above is as follows
-
<!DOCTYPE html>: This declaration specifies the HTML version being used (HTML5 in this case). -
<html>: The root or outermost element of the HTML document, wrapping the entire content. -
<head>: Contains meta-information and other non-visible elements. -
<title>: Specifies the title of the webpage, displayed in the browser's title bar or tab. -
<body>: Contains the visible content of the webpage, such as headings, paragraphs, images, links, etc. -
<h1>,<p>,<img>,<a>: HTML tags used to create page, heading, paragraph, image, and link elements respectively on the page.
TAGS
- <h></h> is used to create heading. You should use among h1, h2, h3, h4, h5, and h6 depending on the heading level on the page.
<h1>This is the main heading</h1>
<h2>This is a main subheading</h2>
- <p></p> is used to create paragraph.
- <a></a> is used to create hyperlinks to other web pages or sections within the same page.
- <img/> is used to insert and display images. It is a self-closing tag as it does not come as a pair like most of the others.
<ol></ol>,<ul></ul>, and<li></li>: are used to create lists.<table></table>,<tr></tr>,<td></td>: are used to create tables<form></form>,<input/>,<select></select>: are using in creating forms and collecting user information.- <button></button>: is used to create buttons
<header></header>,<nav></nav>,<footer></footer>,<section></section>, and<article></article>: are used for better structure and accessibility of webpage.- <div></div> is used to define a division or a section in an HTML document.
It is used as a container for HTML elements and often styled with CSS.
It does not have specific styling on its own but serves as a container for grouping other elements together.
It is easily styled by using the class or id attribute.
Any sort of content can be put inside the<div>tag!
NOW FOR THE FUN PART!!!
Go to the terminal opened in Part I
Run code index.html to start new HTML document named index in VSCode
In the index.html document, we start by declaring the HTML version <!DOCTYPE html> then we set the basic structure.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Between the head tags, include a <title> tag with your name. <title>Olaide</title>
For our portfolio, we will put the following elements inside the body tags:
...
<div class="main_wrap">
<div>
<div class="title_text">Software Developer</div>
<div class="passionate_text">PASSIONATE ABOUT</div>
<h1 class="passions">LEARNING AND DELIVERY</h1>
<div class="btn_links_wrap">
<a class="resume_link" href="#">Resume</a>
<a class="project_link href="#">Projects</a>
</div>
</div>
<div class="img_div_wrap">
<div class="img_div">
<img src="olaide.png" />
</div>
</div>
</div>
...
- We started with
<div>tag to wrap another<div>and an image. - This
<div>has a class attribiute of main_wrap. - The second level
<div>wraps two divs that each wraps text, followed by a heading followed by another<div>that wraps two links (<a>). - Both
<a>contains text that will show as the link text. - Both
<a>each has an href attribute thatwill bethe url of the page that each link will open. For now, thehrefis # and it will open the same page. - Our
<img>tag has a src of {your name}.png. Get a professional selfie ready! A selfie with a transparent background is better.
Your index.html should be similar to this
APPRECIATE YOUR CREATION
Go to your onestitch folder, open the folder called my_portfolio. You should see a file called index.html; "open with" any bowser
UPDATING THE REPO
We will be updating our repository with the task we have completed so far.
Save the index.html document
In our terminal, run the following
git add index.html
git commit -m 'created my portfolio structure'
git push
git add index.html tells git to save the index.html document
git commit -m 'created my portfolio structure' gives a summary task that was completed
git push saves these changes to the repository online
ADIEU!
We should now have the skeleton of our portfolio and can start building on it. Feel free to update the texts as you like and add other elements you will like to have in your portfolio 😉. In the next lesson, we will start CSS Basics. Until then, have fun!
FURTHER READING AND REFERENCES
RELATED POSTS
PREV <--------------------------------------------------------> NEXT
