Understanding HTML & CSS

0
Understanding HTML & CSS

If you are a beginner in web development, the first step you will likely take is understanding HTML and CSS.  HTML stands for Hyper Text Markup Language and it is the standard markup language for creating Web pages. HTML describes the structure of a Web page i.e. how content are thrown into the web page.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

You do not see the HTML tags on the browser because browsers do not display the HTML tags, but use them to render the content of the page.  Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

You can read more in TechForest: Embracing Roothub’s Events for the Future

This is how a simple html document looks like in html 5.  The code below highlights the general structure of an HTML document. I will explain more on html 5 as we proceed.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

 

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 

</body>

</html>

 

Example Explained

The <!DOCTYPE html> declaration defines this document to be HTML5

The <html> element is the root element of an HTML page

The <head> element contains meta information about the document

The <title> element specifies a title for the document

The <body> element contains the visible page content

The <h1> element defines a large heading

The <p> element defines a paragraph

Also in TechForest: Facebook, MainOne, Others Head To Uyo For #StartupSouth5

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here…</tagname>. HTML tags normally come in pairs like <p> and </p>.  The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name e.g.

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them.

The browser does not display the HTML tags, but uses them to determine how to display the document:

Please Note:

The current html version is html5 so in our further studies we will take a look at html5 and what you can actually do with it.

Welcome to TechForest and stay with us here as we war against poverty and hunger using ICT in Southern Nigeria. Follow us on Twitter and Like our page on Facebook. If you have any content or suggestion kindly drop same in the comment section of this website. Together we will win the war.

 

Introducing CSS and how it Works

The first question most novices ask is what is CSS so I thought of introducing CSS and how it works so you it will be much easier for you to follow us on this thread.

CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” While HTML is used to structure a web document (defining things like headlines and paragraphs, and allowing you to embed images, video, and other media), CSS comes through and specifies your document’s style—page layouts, colors, and fonts are all determined with CSS. Think of HTML as the foundation (every house has one), and CSS as the aesthetic choices (there’s a big difference between a Victorian mansion and a mid-century modern home).

How Does CSS Work?

CSS brings style to your web pages by interacting with HTML elements. Elements are the individual HTML components of a web page—for instance a paragraph—which in HTML might look like this:

<p>This is my paragraph!</p>

If you wanted to make this paragraph appear pink and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:

p  {

color: pink;

font-weight: bold;

}

In this case, “p” (the paragraph) is called the “selector”—it’s the part of CSS code specifying which HTML element the CSS styling will affect. In CSS, the selector is written to the left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector. Properties are things like font size, color, and margins, while values are the settings for those properties. In the example above, “color” and “font-weight” are both properties, and “pink” and “bold” are values. The full bracketed set of

{  color:pink;  font-weight:bold;  }

is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. These same basic principles can be applied to change font sizes, background colors, margin indentations, and more. For instance. . .

 

body  {  background-color:lightblue; }

. . .would make your page’s background light blue, or. . .

p  {  font-size:20px;  color:red;  }

. . .will create a 20 point font paragraph with red letters.

 External, Internal, or Inline CSS?

You might be wondering how this CSS code is actually applied to HTML content, though. Much like HTML, CSS is written in simple, plain text through a text editor or word processor on your computer, and there are three main ways to add that CSS code to your HTML pages. CSS code (or Style Sheets) can be external, internal, or inline.

External Style Sheet:

External style sheets are saved as .css files and can be used to determine the appearance of an entire website through one file (rather than adding individual instances of CSS code to every HTML element you want to adjust). In order to use an external style sheet, your .html files need to include a header section that links to the external style sheet and looks something like this:

<head>

<link rel=”stylesheet”  type=”text/css”  href=style.css”>

</head>

This will link the .html file to your external style sheet (in this case, style.css), and all of the CSS instructions in that file will then apply to your linked .html pages.

Internal Style Sheets: Internal style sheets are CSS instructions written directly into the header of a specific .html page. (This is especially useful if you have a single page on a site that has a unique look.) An internal style sheet looks something like this. . .

<head>

<style>

Body  {  background-color:thistle;  }

P  {  font-size:20px;  color:mediumblue;  }

</style>

</head>

. . . a thistle background color and paragraphs with 20 point, medium blue font will now be applied to this single .html page.

Finally, inline styles are snippets of CSS written directly into HTML code, and applicable only to a single coding instance. For example:

<h1  style=”font-size:40px;color:violet;”>Check out this headline!</h1>

would cause one specific headline on a single .html page to appear in violet, 40 point font.

We’ll like to Help Further?

TechForest SoftTechnologies Ltd. is a registered ICT Company in Nigeria.  We are committed to the eradication of poverty by sharing knowledge in the area of ICT and helping young people find their feet in the industry. This is our contribution to the ecosystem apart from handling IT Projects for organizations.

TechForest Academy is established for this purpose.  If you need further assistance or will like to contribute your knowledge in informing the teeming population of young people in the Niger Delta about Web Development or any sector of ICT please contact us.

We believe Information Technology can change the economic status of any nation or individuals, therefore, we at TechForest are committed to bring this knowledge to youths in this part of the world, Africa and beyond. Remember any level of partnership is a seed sowed to this project.

Some knowledge shared here were gotten from w3schools, skillcrush and wikipedia. Please contact us if you need a complete coaching in you want to become a frontend developer.

LEAVE A REPLY

Please enter your comment!
Please enter your name here