PEDIATECH

HTML COMMENTS AND HTML STYLES

2021-02-19T23:51:00.006-08:00

HTML COMMENTS

HTML comments are text, phrases or sentences inside an HTML file.
They are only shown in codes and not rendered by a browser.

WHY USE HTML COMMENTS?

HTML comments help both beginners and experienced web developers to easily organize their codes.
They act like sticky notes in HTML files.

HOW TO WRITE HTML COMMENTS?

An HTML comment starts with

it looks like this:

HT ML STYLES

HTML Styles are used to style HTML elements it also means changing default values.
For instance ,styling can change the default values of text color as black, background color as white ,text alignment as left and text size as 12 pixels.

INTERNAL STYLE SHEET (internal styling)

Using an internal style sheet is also called internal styling.
An internal style sheet is composed of an or more cascading style sheet (CSS) rule-set.
A CSS rule-set consists of a selector and a declaration block surrounded by curly braces that contains one or more CSS declaration separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
They are all enclosed inside the <style> element with its type = "text /css" attribute which is included inside the <head> element.

INTERNAL STYLE SHEET SYNTAX

font-size: 14px;

}

</style>

INLINE STYLING

Inline styling is used to styling elements using the style attribute with css declaration inside which are similar to internal styling.

INLINE STYLING SHEET

BACKGROUND COLOR EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<title> color</title>

</head>

</body>

</html>

TRY THIS PROGRAM IN NOTE PAD OR IN ONLINE HTML COMPLIER

EXAMPLE:

TEXT COLOR EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title> color</title>

</head>

<p style="color:red"> This text in red color.</P>

</body>

</html>

OUTPUT :

This text in red color

TEXT FONT-FAMILY EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title> color</title>

</head>

<h1 style="font-family: Times New Romen"> I am a Times New Romen </h1>

<p style="color:red"> This text in red color.</P>

</body>

</html>

TEXT ALIGNING EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title> color</title>

</head>

<p style="text-align: left"> This text in red color.</P>

<p style="text-align: center"> This text in red color.</P>

<p style="text-align: right"> This text in red color.</P>

</body>

</html>

TEXT SIZING EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title> color</title>

</head>

<p style="font-size: 50px"> This text in red color.</P>

</body>

</html>

HTML ATTRIBUTES

2021-02-18T06:01:00.006-08:00

HTML ARRTRIBUTES

HTML attributes are used to add more information to HTML element

IMPORTANT THINGS TO REMEMBER

HTML attributes are found in HTML tags.
HTML attributes only appear at start tags. It will never to be on end tags.
HTML elements can have multiple attributes.
HTML attributes are composed of name/value pairs.
There are some attributes that can be used on all HTML elements through they may not have effects on some elements. They are called global attributes.

An HTML attribute is composed of :

an attribute name
an equal = sign
a value surrounded by quotation marks "value"

It looks like this : attribute name="value"

you can also use single quotation marks depending upon the situation esp. when the value contains double quotes.

We will only use double quotes marks throughout the entire tutorial.

In this lesson we are going to learn some HTML attributes with example:

ATTRIBUTE LANG

</html>

we use the lang attribute to define the languages of an HTML files'

The languages defined above is American English.

ATTRIBUTE HREF

<a href= "http:www.example.com"> Go to http://www.example.com</a>

links are defined using the anchor <a> element.
On the example above we used the href attribute to tell the browser where to go.
when clicked the user will be redirected to http://www.example.com

ATTRIBUTE STYLE

<!DOCTYPE html>

<html>

<head>

<title> try it yourself </title>

</head>

<body>

I am a paragraph with a size of 40 pixels and my color is gold.

</p>

</body>

</html>

OUTPUT

I am a paragraph with a size of 40 pixels and my color is gold.

NOTE: TRY THIS IN NOTEPAD OR IN ONLINE HTML COMPLIER

On the example given above we have created a paragraph using the <p> element.
We also used the style attribute to change the font-size and color

NEXT : HTML COMMENTS AND STYLE SHEET #clickhere

HTML ELEMENTS

2021-02-18T02:17:00.002-08:00

HTML ELEMENTS

In the first lesson we have studied about tags and things like start tag ( opening tag) and end tag (closing tags).

HTML TAGS

HTML tags are elements names surrounded by an angle brackets.

In HTML we use start and end tags.

START TAG AND END TAG

Start tag - also called opening tag. example : <p>
end tag - also called closing tag. example : </p>

An HTML element is usually composed of a "start tag " , "element content"

and an "end tag".

example: <P> this is an element content </p>

<p>: start tag
this is an element content : element content
</p>: end tag

NESTED HTML

There are some cases that an HTML element can contain one are more HTML elements.

for you to better understand it look at the example code below:

<p><i>italicized text</i></p>

output:

italicized text

NOTE:TRY THIS IN NOTEPAD OR IN ONLINE COMPLIER

The example nested HTML elements above are composed of the following:

start tag :<p>
start tag: <i>
element content :italicized text
end tag :</i>
end tag :</p>

On the example above, there are two start tags and two end tags .

The second tag i.e. <i> italicizes the text within element content

EMPTY ELEMENTS

Empty Elements are elements that do not have an element content and an end tag.

A List of commonly used empty elements :

<meta />
<link />
<img />
<br />
<hr />
<input />

The best practice in HTML empty elements is to always put forward slash (/) sign before the greater than (>) sign .

HTML ATTRIBUTE

HTML5 introduction

2021-02-17T21:26:00.014-08:00

HTML INTRODUCTION

What is HTML5?

*HTML stands for Hyper Text markup Language, it is easy and fun to learn .

*HTML describes the structure of web pages.

*HTML5 is the fifth and current major version of the HTML standard.

Why learn HTML5?

It is essential to learn HTML if you want to built web sites, you can't built one if you don't know HTML because it's one of the prerequisites in learning other languages used of web development.

Try it yourself;

example:

<!DOCTYPE html>

<html>

<head>

<title> hello world !</title>

</head>

<body>

<h1> this is a heading </h1>

<p> this is a paragraph </p>

</body>

</html>

NOTE ; TRY THIS PROGRAM IN NOTEPAD OR ONLINE HTML COMPLIER

Output:

this is a heading this is a paragraph

Example Explained :

<!DOCTYPE html> : this declares the document type which is HTML5
<html> : this element encloses everything inside of an html document; it includes tags, elements ,style sheets, scripts, text, multimedia and a lot more'
<head>: this elements encloses the metadata of a document which will not be displayed on the main content of the webpage ; this include style sheets, scripts , <title> , <meta> tags and lot more.
<title>: this element defines the title of a web page; it appears on the upper on the upper-part of browser.
<body>: this element encloses elements like <h1>,<p>, <img> ,<b>,<i> and a lot more.
<h1>: this elements defines a heading
<p>: this element defines a paragraph

NEXT:
HTML ELEMENTS #CLICK HERE

PEDIATECH

HTML COMMENTS AND HTML STYLES

HTML COMMENTS

HTML comments are text, phrases or sentences inside an HTML file.They are only shown in codes and not rendered by a browser.

WHY USE HTML COMMENTS?

HOW TO WRITE HTML COMMENTS?

HT ML STYLES

INTERNAL STYLE SHEET (internal styling)

INTERNAL STYLE SHEET SYNTAX

INLINE STYLING

INLINE STYLING SHEET

BACKGROUND COLOR EXAMPLE:

EXAMPLE:

TEXT COLOR EXAMPLE

OUTPUT :

TEXT FONT-FAMILY EXAMPLE

TEXT ALIGNING EXAMPLE

TEXT SIZING EXAMPLE

HTML ATTRIBUTES

HTML ARRTRIBUTES

IMPORTANT THINGS TO REMEMBER

ATTRIBUTE LANG

ATTRIBUTE HREF

ATTRIBUTE STYLE

OUTPUT

HTML ELEMENTS

HTML ELEMENTS

HTML TAGS

START TAG AND END TAG

NESTED HTML

output:

EMPTY ELEMENTS

NEXT

HTML5 introduction

HTML INTRODUCTION

What is HTML5?

Why learn HTML5?

Try it yourself;

Output:

Example Explained :

HTML comments are text, phrases or sentences inside an HTML file.
They are only shown in codes and not rendered by a browser.