Headings
In Html ,we use headings not only for representing the main summary text of the page, also we use them for the location of our pages on the Internet .The important purpose is being categorized by search engines as google,yahoo,bing etc...
- Headings elements are <h1>,<h2>....<h6>.
- <h1> has the highest level and <h6> is the lowest level.
- <hr> element is used for creating a horizontal rule.This tag doesn't have any end tag. Sometimes using this tag becomes cool!.
Below there is a simple example for headings and horizontal rule :
| <!DOCTYPE html> <html> <body> <h1>This is the strongest heading</h1> <h6>This is the weakest one</h6> <hr > </body> </html> |  |
<head> element contains metadata which defines title,charset,styles,scripts etc...
<!DOCTYPE html>
<html>
<head>
<title>Sotware Tips</title>
<meta charset="UTF-8">
</head>
<body>
The character set of the page is set to Unicode Transformation Format.This means you can put multilingual text on your web page.
Paragraphs
- <p> is used for creating paragraphs.
- White spaces are added before and after the paragraphs.
- Spaces and line breaks are not preserved with <p> element .If you want to preserve a poem with line breaks you should use <pre> tag.
- You can adjust your paragraph position with an aligning attribute.
- Align attribute has four options for the paragraph:left(default),right,center and justify.
<pre>
But you played it
You played it
You played it
You played it to the beat.
</pre>
As an example, lyrics (from Adele -Rolling in the deep song )are given.
Html Styles
Html Styles are very useful for websites.An Html style is an attribute which is formed by a Cascading Style Sheet -CSS property and a value.
The structure of an Html Style is like that:<.... style="property:value;".....>
Background Color Style
| <!DOCTYPE html>
<html>
<body style="background-color:Aqua;">
<h1>This is an awosome color</h1>
</body>
</html>
|  |
Text Color Style
| <!DOCTYPE html> <html> <body> <h1 style="color:pink;">A pink Heading</h1> <p style="color:grey;">Grey is an old color</p> </body> </html> |  |
Font Style
| <!DOCTYPE html> <html> <body> <h1 style="font-family:tohoma;">A tohama heading</h1> <p style="font-family:impact;">Wow cool!</p> </body> </html> |  |
Font-Size Style
| <!DOCTYPE html> <html> <body> <h1 style="font-size:500%;">A big heading</h1> <p style="font-size:500%;">A big paragraph.</p> </body> </html> |  |
Text-Align Style
| <!DOCTYPE html> <html> <body> <h1 style="text-align:center;"> Central City</h1> <p style="text-align:center;"> Run Barry Run!</p> </body> </html> |  |
Text Formatting
There are lots of elements for text formatting.Below the most used elements are listed with examples:
<b> element is used for making a bold effect.
<i> element is used for italic style.
<sub> and <sup> elements are used for the position (up or down) of text.
<mark> is for an important effect style.
| <!DOCTYPE html> <html> <body> <p><bold>a bold cat</bold></p> <p><i>an italic cat</i></p> <p><sub>a little</sub> cat</p> <p><sup>and a big </sup>cat</p> </body> </html> |  |
An Interesting Element
<bdo> is a cool tag which you can type characters right from left on your browser.
<bdo dir="rtl">It's Cool!Try it </bdo> has a result like:
Comments
You can add comments to your web page source code.
Comments are very useful while you are writing big codes.
They can remind you what you are doing and they are invisible in your browser ,only can be seen in the source code.
<!--This is just a simple comment-->
<!--This comment tag hides the heading tag.
<h1>Hide This Heading</h1>
-->
You can add comments to your web page source code.
Comments are very useful while you are writing big codes.
They can remind you what you are doing and they are invisible in your browser ,only can be seen in the source code.
<!--This is just a simple comment-->
<!--This comment tag hides the heading tag.
<h1>Hide This Heading</h1>
-->
Colors
We use colors to make our designs richer.You can use colors by some attributes like bgcolor,color,font-color,background-color (style property)etc...
In HTML there are 3 ways for creating colors:Specify name of the color,Hexadecimal number and RGB
In the previous chapter we talked about Html Basics;what is Html?Creating an Html File,Elements and Attributes and Html 5.1
In this section we have talked about a bit complex ones:Headings,Paragraphs,Styles,Text -Formatting ,Comments and Colors.I will give a name to this section as HTML Warmings:)
In the next chapter ,i will talk about the skeleton tags of the Html codes.Links,Tables,Images etc...
Maybe i can call the page as "HTML Skeletons".Do not worry it will not be a scary movie page,just adding fun to our lessons.OK guys ,take care of yourselves...
We use colors to make our designs richer.You can use colors by some attributes like bgcolor,color,font-color,background-color (style property)etc...
In HTML there are 3 ways for creating colors:Specify name of the color,Hexadecimal number and RGB
| <!DOCTYPE html> <html> <body> <h2 style="background-color:red"> Call name of the color </h2> <h2 style="background-color:#00FF00"> Specify hexcadecimal value </h2> <h2 style="background-color:rgb(255,255,78)"> RGB is rarely used </h2> <h2 style="background-color:pink;color:grey"> WOW!This looks great! </h2> <h2 style="background-color:gold"> For a gold background (A bonus one) </h2> </body> </html> |  |
In the previous chapter we talked about Html Basics;what is Html?Creating an Html File,Elements and Attributes and Html 5.1
In this section we have talked about a bit complex ones:Headings,Paragraphs,Styles,Text -Formatting ,Comments and Colors.I will give a name to this section as HTML Warmings:)
In the next chapter ,i will talk about the skeleton tags of the Html codes.Links,Tables,Images etc...
Maybe i can call the page as "HTML Skeletons".Do not worry it will not be a scary movie page,just adding fun to our lessons.OK guys ,take care of yourselves...
Posts
