Dear learners Nabin here again. We have learned to install Xampp for local host from previous post. Now we’ll learn the primary lesson how work with html.
What goes into a web page?
Document Type Definition (DTD) precedes any document tags and exists t inform client browsers of the format of the following content, what tags to expect, methods to support, and elements, definitions, events, and so on associated with the document type.
So dears lets start with a page>>
First create a folder to c/xampp/htdocs with any name you like.where we’ll do our job. Than create a notepad document.
Tag and Elements:
To understand the markup, you need to look at what is written between the angle brackets. The two brackets and all of the characters between them are known as a tag. A pair o tags and the content these include are known as an element.
Element
<h1>About Google </h1>
|
All HTML documents have three, document =level tags in common. These tags, <html>,<head> and <body>, delimit certain sections of the HTML document.
The <html> tag:
The <html> tag surrounds the entire HTML document. This tag tells the client browser where the document begins and ends.
<html>
….document contents…
</html>
The html element is the container of the entire document content, including the head element. Typically, the html element strat tag is the second line of an Html file, following the document type definition (DTD) is provided in the file, the html start tag becomes the first line of the file, The end tag should be in the last line of the file. Although the html element doesn’t render per se, it is the root positioning context of a document I a purely W3C- compliant environment.]
The<head> tag:
The <head> tag delimits the heading of the html document. The heading section of the document contains certain heading information for the document. The document’s title , meta information , and in most cases, document scripts are all contained in the <head> section.
The head element contains document information that is generally not rendered as part of the document I the browser window. At most, A browser displays the title element’s content in the browser window’s title bar.
The content of the head of the head element consists entirely of other elements that are intended to assist search engines and document parsers to learn more about the document based on abstract information supplied by the author.
Lets try this on a notepad right same as below
and save as head.html in c\xampp/hotdocs/yourcreated folder name/
Now open your web browser and type on address bar ‘localhost/folder name where you saved notepad/head.html’
Click ‘enter’ and see the change as like
The <Body > Tag:
After all of the material in the head portion of an HTML file, the body element contains the genuine content of the page that the user sees in the browser. Before style sheets, the body was the place where page authors could specify document wide color and background schemes. Agreat many favorite attributes covering these properties are deprecated I HTML4, in favor of style sheet rules that may be applied to the body element.
All HTML code type in notepad
<html>
<head>
<title>Document Title</title>
</head>
<body>
This would be the thing to go in the website.
</body>
</html>
Save as pp.html
Now open your web browser write on address bar: localhost/html/pp.html
See the change
We can have a web page now and let us the following example:
All HTML code type in notepad
<html>
<head>
<title>Popular Websites: Google</title>
</head>
<body>
Google is best known for its search engine, although Goolge now offers a number of other services. The mission of Google is to organize the information of the world and make it universally accessible and useful. Its founder Larry Page and Sergey brin started at Stanford University.
</body>
</html>
Save as pp1.html or as you use on local host
Now open your web browser write on address bar: localhost/html/pp1.html
See the change
Elements for marking Up Text
Elements to describe the structure of text are:
·
The six levels of headings:<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
·
Paragraphs <p>, preformatted
sections<pre>, line breaks<br/>, and addresses<address>
·
Presentational elements: bold <b>, italic
<i>, underline <u>, <tt>, super script <sup>, subscript
<sub>, <strike>,
<big>,<small>, and<hr/>
·
Phrase elements such as <em>, <strong>,
<abbr>, <acronym>, <dfn>, <blockquote>, <q>,
<cite>, <code>, <kbd>, <var>, <samp>, and
<address>
·
List such as unordered lists using <ul>
and <li>, ordered lists using <ol> and <li>, and definition
lists using<dl>. <dt>, and <dd>
·
Editing elements such as <ins> and <del>
·
Grouping elements such as <div>, and
<span>
The Heading elements:No matter what sort of document you are creation , Most documents have headings in one form of another.
Now try this on notepad:
All HTML code type in notepad
<html>
<head>
<title>Popular Websites </title>
</head>
<body>
<h1> About Google</h1>
<h2>About Yahoo</h2>
<h3> About Facebook</h3>
<h4> About Bing</h4>
<h5> About Opera</h5>
<h6> About Ask</h6>
</body>
</html>
Save as pp2.html or as you use on local host
Now open your web browser write on address bar: localhost/html/pp2.html
See the change
The paragraph <p> Tag
In HTML paragraph are delimited by the paragraph tag <p>. The paragraph tag controls the line spacing of the lines within the paragraph as well as the line spacing between paragraph. The default spacing is single and double space within the paragraph, Each paragraph starts with <p>and close with </p>
All HTML code type in notepad
<html>
<head>
<title>Popular Websites: Google</title>
</head>
<body>
<h1>About Google</h1>
<p>Google is best known for its search engine, although Goolge now offers a number of other services. The mission of Google is to organize the information of the world and make it universally accessible and useful.</p> <p>Its founder Larry Page and Sergey brin started at Stanford University.</p>
</body>
</html>
Save as pp3.html or as you use on local host
Now open your web browser write on address bar: localhost/html/pp3.html
See the change
Creating line breaks using<br/>
Whenever you use the <br/> element, anything following it starts next line. You do not need opening and closing tag for this.
Now try this on notepad
All HTML code type in notepad
<html>
<head>
<title>Popular Websites: Google</title>
</head>
<body>
<h1>About line break</h1>
<p>Google is best known for its search engine,<br/>
although Goolge now offers a number of other <br/>services.
The mission of Google is to organize the information <br/>of the world
and make it universally accessible and useful.</p>
<p>Its founder Larry Page and Sergey brin started <br/> at Stanford University.</p>
</body>
</html>
Save as pp4.html or as you use on local host
Now open your web browser write on address bar: localhost/html/pp4.html
See the change
Creating preformatted text using the<pre> element.
If you want your text to follow the exact format of how it is written in the HTML document you don’t want the text to wrap onto a new line when it reaches the edge of the browser.
Now try this on notepad
All HTML code type in notepad
<html>
<head>
<title>Popular Websites: Google</title>
</head>
<body>
<pre>
int doIT (int a, int b) {
return a*b;
}
</pre>
</body>
</html>
Save as pp5.html or as you use on local host
Now open your web browser write on address bar: localhost/html/pp5.html
See the change
.
Ok dears no more today next day I will provide you the using of “Presentation Element”.
Stay tuned and practice all of these.
Thank you
