s

Home > html & css > learn to create a website

Learn to Create a Website edit button Edit

author
Vivekbeera007@gmail.com | calendar 18 December 2020 | 1830

In this Article we will see how a Basic Web Page is created and how it is implemented using HTML & CSS.

About Html & CSS

Learning Website will be FUN

Single HTML Document with all the its elements will show us how the Web Page content are instructed (Simply as a Microsoft Word Document with all the content in it without any alignments). CSS gives all the stylings to the HTML Document. Together HTML and CSS gives attractive Websites. The more Stylings of CSS stylings will be the more attractive website that one can be created.

HTML and CSS can be placed in the same file, but due to the more number of lines of the code it is better to keep them in seperate files. So, that we can easily identify which part of code belongs to which block of the html content and the css file will be linked with Link Element, which will be seen as we go depth in learning.

Working with HTML & CSS together

    1. Only HTML implementation will be as simply as a Microsoft Word document.
    2. Only CSS gives the Styling part to the Web page present in the HTML Document.
    3. Both together will give a Good attractive website with all the CSS stylings and HTML Elements.

      Simple HTML Web Page

      This is the Web Page without the CSS stylings..








      Simple CSS Web Page

      After giving some CSS Stylings, The HTML Document will be as









      Hyper Text Markup Language

      In 1993, the first version of HTML was proposed by Tim Berners-Lee.The most widely used version by 2000 is HTML 4.01 which became an official standard in 1999. The Developers of HTML are World Wide Web Consortium. These type of files are saved with an extension .html .

      HTML gives the Structure of the Web Page. HTML Document consists of two major parts. ie. HEAD and BODY section's. All the content of the HTML Document are placed in the BODY part whereas the TITLE of the webpage, Styling of the HTML document are placed in the HEAD section. HTML Document has simple tags which gives some instructions to the content that how to look on the Web Page. Tags has both starting and ending tags. Tags whith some content in between the starting and ending Tags are known as Elements. The ending Tag is preceded by a backslash(/). HTML tags are not case-sensitive.

      Some of the HTML Elements

      HTML
      It is the root Element, it represents the HTML Document.
      Body
      Content of the Web Page is placed in this body section.
      Head
      It is the head of the HTML Document, where we can place all the stylings and the title of the page.
      Title
      It is used to define the title of the page.
      Style
      It is placed in the head session and all the CSS stylings are placed in the Style Element(i.e., between the open and the close tag).
      Heading
      It defines as the heading text of the paragraph or the HTML Document.

      There are 6 types of heading tags.

      • h1
      • h2
      • h3
      • h4
      • h5
      • h6

      h1 is the Highest Tag in Size.

      h6 is the Highest Tag in Numbering.

      p
      It is the Paragraph Tag, where we can place the content of the HTML Document.
      br
      Break tag, gives a break of the present block/paragraph and go to the next line.
      img
      It is used to place an image in the web page anywhere we required in the body session.
      Div
      It is considered as a seperate block of the HTML Document where we can define any HTML Tags in this block.
      Section
      It is also defined as a seperate block in the HTML Document.
      footer
      It is the the footer of the HTML Document.
      Center
      It is used to align the content to the center of the page.
      Table
      It is used to create a table in the HTML Document.
      tr
      It is used to create a row in table.
      td
      It is used to define some data in the table.
      th
      It is used to create a column in the table.
      OL
      Ordered List, it is used to list the content in the order using numbering/Roman format.
      UL
      Unordered List, it is used to list the content using figures like Disc/Circle/Box's.
      Li
      It is used to define the content in the OL/UL list.
      a
      It is used to add the HyperLinks to the Web Pages

      HTML Comments

      Comments are not displayed on the Web Page but you can see them in your Implemented Code.

      HTML Iframes

      HTML Iframes are used to show a Web Page within another Web Page.

      HTML Attributes

      Attributes are used to provide additional Information of that HTML Element. Every HTML Element will have their own specific Attributes. These Attributes are defined in the starting tag of every HTML Element.
      These are in the form of name and value pair i.e., name="value";
      Img
      src : used to locate the image in your device/ in the server
      alt : it is used to provide the name of the image, if the image loading time is slow (or) if the image is not available.
      a
      href: It is used to create a Hyper link to the text.

      HTML Images

      These provide to add images which makes our Web Page look more attractive.

      Cascading Style Sheets

      It is one of the Core Technology used in building up a Web Page. It was developed to provide Style Sheets to the Web Pages. Håkon Wium Lie proposed to implement CSS along with HTML on 10th Oct,1994. CSS can be implemented in 3 ways. These CSS type of files are saved with an extension .css .

      1. Inline CSS
      2. Internal CSS
      3. External CSS

      Inline CSS

      It is a type of Styling where all the Stylings Attributes given to the Web page are placed in the same HTML Element to which part of the Web Page we are giving to, by using STYLE Tag.

      Internal CSS

      It is a Style Sheet where all the stylings given to the Web Page are placed in the HEAD section of the HTML Document by using STYLE Tag.

      External CSS

      It is also a Style Sheet where all the stylings are given to the Web Page which are placed in an external sheet and saved with an extension of .css . This external CSS file is linked to the main HTML Document by using the LINK Tag which is placed in the HEAD Section.

      CSS Selectors

      These CSS Selectors are used to find or select the HTML Elements to which you want style. There are 3 Types of CSS Selectors

      Element Selector
      The stylings to the HTML Document are given using a particular HTML Element to which stylings are given.
      Ex:
body
{
color:blue;
}
      Id Selector
      The Styling to the HTML Document are given using the Id Attribute which was defined in the HTML Element. While using Id selector the Id name is preceded with a #(ash) symbol. This type of styling is defined in the STYLE Element, where the STYLE Element is placed in the HEAD Section.
      Ex:
#html
{
color:blue;
}
      Class Selector
      The Styling to the HTML Document are given using the Class Attribute which was defined in the HTML Element. While using Class selector the Class name is preceded with a .(dot) symbol. This type of styling is defined in the STYLE Element, where the STYLE Element is placed in the HEAD Section.
      Ex:
.html
{
color:blue;
}

      CSS Attribute Selector

      Css Attributes also provides styles to the specific attribute or specific value.

      The [attribute] selector is used to select the specific attribute.