HTML and CSS basic.

Html css basic

HTML Basic:

Create New folder: Go to anywhere ij your computer and created create a new folder. And name it anything, like HTML
Thne the folder in VScode.
This directory is empty, let’s add a file here and call it index.html
The index.html is often refferes the homepage of a website.
Now the first thing is to tell the browser that, it is the html document.
- First type left angle bracket
- Then there will a suggest list appears
- The first one is doctype or document type
- Let’s hit enter or tab button in keyboard and vscode generate the belos code for us.
```
<!DOCTYPE html>
```
- So with this line of code we can tell browser this is a html document.
- This line of code called doctype diclaration.
Useage of element: We are going to use html element.
So type html and hit enter/tab then will create a block for us like:
```
<html></html>
```
Now inside this element we will other elements like head, body like below
```
<html>
  <head></head>
  <body></body>
</html>
```
- We use the head element to give browser information about the page.
- For example, we can use ‘title’ element to specify the the title of the page.
```
<html>
  <head>
    <title>My first web page</title>
  </head>
  <body></body>
</html>
```
Open in a live server. Make a right click somewhere in the codes and click on the open with live server option. It will open in browser. But this is an empty page.
The url of the page is like: http://127.0.0.1:5500/index.html
- The 127.0.0.1 represents the local computer.
- and 5500 is the port number on which our web server is listening.
- Our web server is waiting for HTPP request on this port.
- and this /index.html is name of our file.
Now back to the VScode and add elements inside the body which is going to show on our web page. Let’s we want to show here a tweet. So what elements should show here an image, and some text elements.
- image: to add image tag type img and hit enter/tab it will create the code for us.
```
<img src="" alt="" />
```
- The image element does not have the closing tag. Because the image element can not have any child element.
- There are 2 attributes: src, which is ‘source’ and alt, altranative text.
- With these attributes we can supply additional information about the image element.
The src attribute is used to specify the path of the image.
- Let’s say we create a new folder in root directory and named it images.
- then put an image there in the file.
- And inside the double src write the file name ‘images/img_file_name.jpg’ it is auto suggested by vscode.
```
<body>
  <img src="images/nameera.jpeg" alt="" />
</body>
```
The alt attribute we use to give browser some text to display incase the image can not be displayed. For the time being we remove this attribute for this demo.

Now add some text element inside the body. Type p and hit enter a element block code will be created, then inside the block write the text like and the codes look like;

<!DOCTYPE html>
<html>
  <head>
    <title>My first webpage</title>
  </head>
  <body>
    <img src="images/nameera.jpeg" />
    <p>@khalid</p>
    <p>Evening sun in West</p>
  </body>
</html>

Still this does not look like tweet yet. Because we did not apply CSS yet. As we know, we use HTML to define the structure, the building blocks of the web page and CSS is used for styling.

CSS Basic:

Let’s see how we can use CSS to improve the page:

Look at the head element. Currently we have a single element inside the head element, title. Now after the title we are going to add another element called style and hit enter.
It will create the code: and inside the style element we will write css codes.

So in between style tag we will write some css rules.

First, we will resize the inage currently it is too big. So write, img to reference our image element. then a pair of curly braces {}, and inside the curly braces we will write one or more css declarations, each declaration contains a property and value like, width: 100px;

<!DOCTYPE html>
<html>
  <head>
    <title>My first webpage</title>
    <style>
      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <img src="images/nameera.jpeg" />
    <p>@khalid</p>
    <p>Evening sun in West</p>
  </body>
</html>

Save the changes and see the image gets smaller.
Now I want to make the edges bit round. So write another property called border-radius: and set this to 10px. And save the change, see the image edges are bit round.

<style>
  img {
    width: 100px;
    border-radius: 10px;
  }
</style>

If you want to make full round then set the border-radius value to halfp of width, so in this case set this to 50px.
Now let’s say we want to align the image to left side. So add another property called, float: and set this to left.

<style>
  img {
    width: 100px;
    border-radius: 10px;
    float: left;
  }
</style>

At this point, if you look at the web page you may notice the image displays on left but there is no space gap between the image and the text. Let’s make a space gap between them by adding another property, mergin-right: and set this to 10px.

<style>
  img {
    width: 100px;
    border-radius: 50px;
    float: left;
    margin-right: 10px;
  }
</style>

Now make the user name bold. To do so we need to add another rule to our paragraph element inside the style. Type p and a pair of curly braces and inbetween the braces we set the font-weight: property to bold
Save the changes and take a look at the page, all the text are become bold. But we wanted to bold the user name only. To do so, we need to assign class attribute to the property of the paragraph which i want to make bold like below:

<!DOCTYPE html>
<html>
  <head>
    <title>My first webpage</title>
    <style>
      img {
        width: 100px;
        border-radius: 50px;
        float: left;
        margin-right: 10px;
      }

      p {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <img src="images/nameera.jpeg" />
    <p class="username">@khalid</p>
    <p>Evening sun in West</p>
  </body>
</html>

Then we need to rewrite the rule once again like assign the username class and period infonrt to the rule instead p property. with this change all the elements with username class are found those text will be bold.

<!DOCTYPE html>
<html>
  <head>
    <title>My first webpage</title>
    <style>
      img {
        width: 100px;
        border-radius: 50px;
        float: left;
        margin-right: 10px;
      }

      .username {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <img src="images/nameera.jpeg" />
    <p class="username">@khalid</p>
    <p>Evening sun in West</p>
  </body>
</html>