Front-End Fundamentals: LEARNING BASIC HTML5 and CSS3

clicker (43)Friendin Steem Schools • 3 years ago

Hello Steem School world, today I decide to create a series of blogs teaching the basic fundamentals of HTML5 and CSS3. I intend to teach and share a little knowledge in this community (Steem School) the basic fundamentals of web design.

This series of blogs is not intended for professionals who have intense knowledge of HTML and CSS. But if you are interested to learn Web Design, these blogs can help you launch curiosity.

Just a few disclaimers. "I am not a professional to teach these lessons." Same as you and a good thing to know, I am also a "YouTube" student. I watched many videos uploaded on the youtube site. It is up to you if you want to get a professional degree in this topic. If Web Designing is one of your interests, you can apply online for short courses.

This link will help you find a short courses online: PIRPLE.COM

With out wasting much time, LET US GO!!!

Introduction to HTML5

^{Google Image}

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML elements tell the browser how to display the content in your webpages

What does HTML looks like?

What does HTML look like? Maybe you have seen it before or maybe not. If for example while browsing/surfing a webpage you accidentally 'right click' then 'view page source' and see all bunch of staff which caught your attention. Generally, this is HTML!

HTML is composed of 'elements'. This HTML elements are used to enclose different part of the content. Example of these are tag elements, link elements and div elements and many more. These elements tell the browser how to display the content.

SIMPLE HTML DOCUMENT :

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
   <title>MY FIRST WEBSITE</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>This is a Paragraph.</p><
</body>
</html>

HTML DOCUMENT EXPLAINED :

The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
The <HTML></HTML> element is the root element of an HTML page.
The <head></head> element contains meta information about the HTML page.
The <title></title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).
The <body></body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1></h1> element defines a large heading.
The <p></p> element defines a paragraph.

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>
<p>This is a paragraph.</p>

ELEMENT TABLE (additional reference) :

Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	This is a paragraph.	</p>
<br>	none	none

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

This is all for now!!!

We have learned that all webpage are composed of HTML elements.
This elements are use to group contents which the browser can render and print on screen.
HTML Elements are consist of tags, links and div's.
Some HTML elements have no closing or ending tag. These are called stand alone or empty tag. e.g. <br> and <hr>.

If you want to learn more, here are FREE coding site.