Skip to main content

HTML BASICS : CLASS 101

For this, you will need a browser and a text editor.
If you have a laptop or desktop, then you probably already have a browser installed ( Internet Explorer or Microsoft Edge if you are on Windows, Safari if you are on a mac ).
However I recommend installing Chrome ( get it here ) or Firefox ( get it here ).
By now, you probably know that a browser is simply a software used for browsing the internet.
Another software you will need for this class, is a text editor. This allows you to write your code.
I recommend using sublime text (get it here).

 Great! Now your are ready to begin your "front end web development" (or simply, creating websites) journey.
  • In your desktop (or anywhere you prefer saving your work) , create a folder myProjects. Inside this folder, create another folder and call it html.
  • Open up sublime text and click 'file' (top left), then click 'new file' , then click 'file' again and this time click 'save as'. 
  • On the window that appears, go to the 'html' folder you just created.
  • Under 'file name', type my_site.html.
  • Make sure it says 'all files' under 'save as type' (if not, then click the drop down list and select HTML(*.html ...) ) and click save.

 At this point this is what you need to know about html.
  1. HTML stands for hypertext markup language(knowing this will help you speak better with "experienced" web developers).
  2. Any website is made of content (text, images, videos and audios, as well as links to other webpages) and HTML is a way for you to specify how the browser should display the content.
Consider the image below:

In the image above, we can say that there is a main heading which is ON A MISSION , a smaller heading at the bottom  i.e. 'PODCAST' and another at the top i.e. NASA | JPL .
There is also a pretty cool background image.
Ignoring the image (for now), all the headings, large or smaller are simply text (a bunch of letters). We refer to them as headings because we 'know/think' them to be so. Similarly, we can tell a browser that certain text is a heading and even specify how small or large it should be.
Let's do that now.
  • In the sublime file you just created (and named my_site.html),  start typing <htm
  • A popup should appear saying html, click enter, and the following html code shall be added for you (thanks Sublime). 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>
  • If the code does not appear, then you will have to type the above code yourself (or if you are lazy like a true programmer should be, just copy and paste it).
  • Ignoring most parts of the code, let's jump into the <body></body> portion.
  • Everything you want to display in your website goes inside the body tags.
  • A tag in html, is any element that is surrounded by the < and > characters. So, <html> , <head> , <title> and <body> are all tags. You will learn many more later on.
  • Most tags are opened and closed. < > specifies the opening of a tag  while </  > specifies the closing of a tag.
  • Inside the body tag, type the three headings in the image above as follows:
<body>
    <h2>NASA | JPL</h2>
    <h1>ON A MISSION</h1>
    <h4>PODCAST</h4>
</body>
  •  Click 'file' then 'save'. Go to html folder where this file is saved and double click to open it in a browser ( you may need to right click and choose open with, then select a browser you prefer ).
Congrats! You just created your first website.  
At this point, it is just a simple website with three headings. 
Let's wrap today's lesson by discussing how html displays headings.
Looking at your html code (in sublime or whatever text editor you decided to use) and the output (in your browser), note the following;
  1. the middle heading, ON A MISSION looks larger than the other two.
  2. the bottom heading is the smallest of all.
  3. The tags (<body> , <h4> , etc) are not appearing, only the text inside them.
The browser uses the html tags to understand how to display the text. The tags themselves are not displayed. 
To display a heading, 
tags  <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> and <h6></h6> are used. 
We are only using three of these in our site.
Notice that, the larger the number following the <h, the smaller in size the heading appears. That is surrounding text with <h1></h1> will make the text appear as a larger heading compared to using <h2></h2>, which is larger than <h3></h3> and so on.

 That's it for today!
Your site does not look like the image above yet, but that's okay.
Play around with the headings, changing h1 to h3 for example, then save and view the output in your browser.
Leave a question in the comments section if you have any. 
You can use this video to follow up.
 




    Labels:

    Comments

    Post a Comment

    Popular posts from this blog

    CSS BASICS : CLASS 109 part III

    Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' .  This is the CSS code that we used to style our sections.html page. #header{     background-color: grey;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 15px; } h2{     margin: 0px;     color: white; } #content{     padding-left: 15px; } p{     display: inline-block;     float: left;     margin-right: 50px; } form{     display: inline-block;     border...
    Post a Comment
    Read more

    HTML BASICS : CLASS 105

    Hello and welcome to the 5th lesson in a series of HTML for beginners tutorials. In this tutorial, we shall; modify the size of the image we inserted in the previous lesson learn how to add links in our website. At this point, your my_site.html file should have the following code in it. <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h2>NASA | JPL</h2>     <h1>ON A MISSION</h1>     <h4>PODCAST</h4>     <p>A new podcast from NASA</p>     <ul>         <li>Arrival</li>         <li>We Are the World</li>         <li>Worlds of Wonder</li>     </ul>      <ol>    ...
    Post a Comment
    Read more

    HTML & CSS BASICS : Comments & Review

    Hello and welcome back to this tutorial series. Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others. Being programmers, we are going to do this by coding a simple web page. Your task is to see if you understand all that is happening , if not, then be sure to revisit a previous tutorial on the subject and re-read it. Along the way, I will be recommending common practices for organizing & writing your code. Let's get started. I recommend storing your web-project files as follows; Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files.  For this work, create a new folder and name it review .  Inside it create two folders , name one styles and the other html . Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) ...
    Post a Comment
    Read more