Introductory Course to HTML and CSS - Part 4



In the previous post Introductory Course to HTML and CSS - Part 3, we discussed about the internal structure of the code seen in the additional panel of "Developer Tools".

 This is basically a "Branching Structure".

 The triangles  on the left side on the lines of code are HTML elements.
Each HTML element has a "opening tag" < and a "closing tag" >

 The content inside the tags could be simple texts or another element.
For example: 

 <p> This is a test</p>

 <h2>
       <span> This is Test 2 </span>
</h2>

 <p>
      <a href="www.prevajconsultants.com"> Prevaj Consultants </a>
</p>
We need to know how the browser knows the structure and displays the content and images correctly.

 The HTML tag elements we discussed above just classifies  the page content to help the browser understand, which part of the content is text, image, link etc.

Popular posts from this blog

Introductory Course to HTML and CSS - Part 3

Image
Lets explore a web page. Go to www.prevajconsultants.com You can see a lot of text and images in different sizes and shapes. Lets look at the inner structure of the site. As mentioned in the previous post  Introductory Course to HTML and CSS - Part 2 , we will use Google Chrome as our browser. It has lot of Developer tools  In Google Chrome, open the website   www.prevajconsultants.com On the top right of the browser you would see a " three-horizontal-lines " or " three vertical dots " like icon  Click on the icon and select More Tools > Developer Tools An additional panel will open at the bottom of the browser, which shows the inner structure of the page Remember, the codes you see in the additional panel is not the actual code itself, but rather the internal structure of the page as interpreted by the browser. If you mouse over the lines of code or elements in the structure, you will notice that the parts of the
Read more

Introductory Course to HTML and CSS - Part 2

Consider yourself to be working as a front-end developer. And you have got a design from the company's graphic designer. You need to take this image or pdf file and convert it into a web page with all the necessary components like HTML files, CSS files and JavaScript  files So where do you actually start? Well we need to understand the basic concept of a website and its components. Here you go.... The website is actually like a house.  HTML files are structures that form the wall of the house segregating the house into rooms.  CSS files are elements that provide the styles to your house like colors, decors, spacing used in the house. JavaScript files are interactive components similar to remote controls in your house which help operating some of the elements in the house. Every element in the house has rules about how to behave. For example, you cannot have a dining table floating in the air. It has to be placed firmly on the floor. Similarly there are rules about
Read more

Introductory Course to HTML and CSS - Part 1

Introduction: HTML and CSS are markup languages and the building blocks that make up the web. This course does not follow the usual pattern of  focusing on language syntax because just by learning the  syntax would not enable us to create a webpage from a design. We need to know where to start and how to approach the task like a front-end developer. What will we learn in this Course? In this course we will learn how to how to convert a design mock-up into static web pages.  how to approach page layout how to break down a design mock-up into page elements how to implement that in HTML and CSS. how to handle responsive design techniques to make the web page mobile friendly Let's get into the course  - Click here
Read more