Home / Training / LEARN HOW TO MAKE A WEBSITE USING HTML AND CSS: PART 2

LEARN HOW TO MAKE A WEBSITE USING HTML AND CSS: PART 2

-
BASICS OF HTML LANGUAGE


I-introduction:

in this chapter, we will start to write HTML code and create our first web page, but we have to tell you that we will only make a simple page that contains links, text ( title, list and paragraph ) and images, it will not be beautiful but we will see in the next chapters how we can make our website more beautiful using CSS and Javascript.

 to make an HTML file we go to our text editor, in my case i use brackets, and follow these steps:

  1. create a new folder for your project
  2. create a new file
  3. name that file "index.html" 
  4. write this following code 
<!DOCTYPE html>
<html>
<head>
 <title>my website </title>
</head>
<body>

</body>
</html>

if you use other text editors like sublime text or notepad++ it will be the same steps.

 Now let me explain to you the code that we wrote.
as you now none <!DOCTYPE html> precise that we are writing HTML document 

 the <html>...</html> tag is very important because it's the element that represents the whole web page without it we can't insert correctly others HTML element.

 inside <html> tag we can see that there is a <head> and a <body> tags.

  • the <head> tag is the invisible part of our web page that's mean that what you write inside it will never be displayed, the <head> tag contain the information of the web site (the title of the web page, the favicon of the website, the encoding system, ... )
  • the <body> tag will contain the content of the web page that's mean it will contain the text, the images, the links and many other elements that we will see in the next chapters.

II-Create your first web page

Now that we have a better knowledge about the HTML let's enter deep and try to create our first web pages.
 before you will be excited it will not be a beautiful page with colors and many shapes and effect, it will contain a Title and an article and an image, so let's start it.

First, we will write our base code of any HTML file


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

</body>
</html>

now that we wrote the base file let's add our elements.
we will start first by the head element. As i said the head tag is the invisible part of our web site, it will contain some information of the web page, in our case we will add two main things

  • the encoding method
  • the web page's title
for the encoding method we will use a <meta charset="utf-8"/>.
meta tags are a set of tags that will precise various information about our web page, but we will see it in other chapters not now.

for the title we will use <title> your title here </title>
in the final, our <head> will be like this.

<head>
 <meta charset="utf-8">
 <title>my website</title>
</head>


Now let's work on the <body> tag. We will start by adding the main title for that we will not use <title> tag.



NB: title tag is used only inside the <head>, there is no <title> tag inside <body>







III-Display Titles inside your web pages

for the title we will use the headings. Headings represent the Title inside the body and there are 6 types of heading in HTML


 <h1>Your title</h1>





<h1> your title </h1>



<h2> your title </h2>



<h3> your title </h3>



<h4> your title </h4>



<h5> your title </h5>



<h6> your title </h6>



as you cans see they are different by the size and for the search engine like google it's necessray to presize what kind of level to use because <h1> is the main title and <h6> is a secondery one.



now we will use h1 and h2 two create a main article inside our web page.



and we will use this lines of code


<h1> how to make a web page </h1>

<h2> programming language </h2>



and that's it for the heading, now let's move to the paragraph.

You will see that the more you practice the more you will understand and memorize that.



IV-display paragraph in HTML

for the paragraph we use the <p> tag. to create a paragraph in HTML it's the same way as headings, we write:

 <p> your paragraph </p>                                                        


 the paragraph tag doesn't have a special style like headings, it will only display a simple text inside your web page.



V-display images inside your web pages



for the images we use the <img /> tag, <img/> is an inline tag so it's not written this way  '<img> </img>'.







for the images, we will see what we call attributes. An attribute is a property that precise some information about the <img/> tag. in this part we will see 4 main attributes:




    

  • src: to specifies the URL or the path of the image
    • 

  • alt: it specifies an alternative text to the image
    • 

  • width: to specifies the width of the image
    • 

  • heigth: to specifies the heigth of the image
    • 




to insert an image inside our web page it's simple , we need to precise the path of the image or an url and a description of the image so we will use this line of code






<img src="images url or path" alt="an image of an island" width="650px" heigth="420px" />


 as you can see we can use two ways to specifies the source,

we can use a link from the internet and paste the full URL inside the source, or if you have an image in your porject folder you have to add the relative path.

for exemple if we have a folder strucutre like this 




    

  • my project
    • 

      

    • img
      • 

        

      • bg.png
        • 

      

    • pages
      • 

        

      • gallery.html
        • 

      

    • style
      • 

    • index.html
      • 

    




if we want to insert the "bg.png" image inside our index.html page we have to insert this path inside our image "img/bg.png"



and the code will be :


<img src="img/bg.png" />



else if we want to insert the "bg.png" image inside the gallery.html page we have to use this path, "../img/bg.png"

the " ../" mean that we will return to the mother folder that's mean the folder that contains the page folder 

and the final code will be:


<img src="./img/bg.png" />




 And that's it we know now how to create an image



VI- the full web pages



now that we know how to insert a title, paragraph and an image in our web site i will show you the full source code and the result of this tutorial



for the image, we will use un splash to give us an image and we will use lorem ipsum to generate a random paragraph


 the final code:




<!DOCTYPE html>
<html>
<head>
 <title>OUR FIRST WEB PAGE</title>
</head>
<body>
 <!-- we will ad the heading -->
 <h1>discover this islnad</h1>

 <!-- we will ad the image -->
 <img alt="an image of an island" width="640px" height="420px" src="https://images.unsplash.com/photo-1529686342540-1b43aec0df75?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">

 <!-- we will ad the paragraph -->
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique sagittis turpis, et feugiat nisl facilisis eget. Nullam semper nec ipsum eu aliquam. Mauris ultricies sed risus id consequat. Nunc sit amet fermentum elit, et posuere orci. Aliquam diam nisi, placerat sed euismod in, dapibus eget urna. Sed et volutpat metus. Etiam non viverra quam. Duis rhoncus quam erat, at accumsan nisi rhoncus non. Nam ut lacinia nisi.

  Vestibulum et fermentum nisi. Morbi pellentesque lobortis dui, ac aliquam dui fermentum sit amet. Cras vestibulum dapibus ultrices. Sed aliquet dapibus nibh, et blandit lorem venenatis eget. Cras tempor mi dui, vitae ornare libero suscipit non. Nulla quam eros, molestie ac justo et, gravida euismod urna. Mauris consectetur mollis faucibus. Duis viverra rhoncus est id rutrum. Nam erat justo, scelerisque ac sagittis et, vehicula vitae lorem. Mauris leo nisl, ultrices nec nunc vitae, mollis fringilla mauris. Aenean erat urna, congue sit amet urna sit amet, auctor varius nunc.
 </p>

</body>
</html>











the final result



and that's it for this chapter, in the next chapter we will see how to insert links, list and organize our paragraph.

thank you for reading 










LEARN HOW TO MAKE A WEBSITE USING HTML AND CSS: PART 2
LEARN HOW TO MAKE A WEBSITE USING HTML AND CSS: PART 2
 
        Reviewed by Medics
        on 
        
March 16, 2019

 
        Rating: 5


















    







      

    






No comments:













































Subscribe to:

Post Comments
                      (
                      Atom
                      )
                    








          












-->






























Powered by Blogger.