WHAT'S NEW?

2nd Lesson: introduction to web pages construction.

Even if you have never seen any HyperText Markup Language (HTML) code, you may know that it is used to create web pages. There have been five versions of HTML since the web began, and the development of the language is overseen by an organization called the World Wide Web Consortium (W3C).
Lesson #2

Open your Notepad++ and write the following code into a new file sheet:




<html>
  <head>
   <title>My First Page</title>
  </head>
  <body>
  
Here is the body of the page

  </body>
</html>

Now save the work as a name dot HTML (the extension of the file should be HTML to tell the browser that the file is a web page.
Let's named as index.html:
And save it on a new folder.
Open the index.html on your browser:


The title of the page is My first Page so now we know that the title tag <title> is responsible of the title of the page, title tag should be betwin the opened tag of head and the closed one.


<head> <title> the title </title> </head>


And all the web page content is coded betwin open body and closed body tag.

HTML is a Tag language:
so all what you need to learn in html codes are tags, tags are rwitten under < and > so now let's see some usfull tags in html.

Titling tags (Heading):


<h1> This is a big title </h1>
<h2> This is a smaller than the first</h2>
<h3> This is a smaller than the 2nd </h3>
<h4> This is a smaller than the 3nd </h4>
<h5> This is a smaller than the 4th </h5>
<h6> This is the smaller title i have ever seen </h6>

let's take a look on the browser.
Previewing in google chrom.

so h# is responsible of sizing the text or the title. PS: # variate betwin 1 and 6.

<p> is responsible of paragraphes.
<b> to make a text bold.
<i> Text italic.
<br> Back to a new ligne.
<center> Text in center of the page
<h#> Heading titles;

Let's take a look at this is exemple:






<center><h1> Welcom to my web page </h1> </center>
<h2> Write this: </h2>
<p> This is a paragraphe written and the p tags so don't read this it's just a loreum ipsem :Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
look i have used br tag to back in lign.
<center> this is a centred text <i> and italic text </i> </center>

copy this exemple and past it into your html code page and try to figure out how we use tags to create a custom text configuration.


That sounds good as a first web page.

PS: NEXT LESSON WE WILL TRY TO CREATE A STRUCTURED HTML PAGE.

0 Comments:

Post a Comment

Thank for leaving a comment