Class VII
Subject: Computer Science
Textbook: IT Planet Petabyte
Chapter – 8: HTML – Creating Web Page
General Instructions:
1. Read the text thoroughly. 2. YouTube links are given for further explanation of the topics.
• HTML5 • Creating and Saving a Web Page • Basic HTML Tags • Displaying Web Page in a Web Browser
HTML is the standard markup language for creating Web pages. HTML stands for HyperText Markup Language. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements are represented by tags. Web pages can be created and modified by using professional HTML editors. However, for learning HTML it is recommended to use a simple text editor like Notepad.
HTML5
HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It is a system that allows the modification of the appearance of web pages, as well as making adjustments to their appearance.
Understanding HTML5 document Structure
A Simple HTML Document:
Example
Page Title SAMPLE DOCUMENT
Let’s know about each of the above tags.
:
It defines the document type or it instruct the browser about the version of HTML. The declaration for HTML5 is:
:
This tag informs the browser that it is an HTML document. The text between the HTML tags describes the web document. It is a container for all other elements of HTML except
:
It should be the first element inside the element, which contains the metadata (information about the document). It must be closed before the body tag opens. The
element is a container for metadata (data about data) and is placed between the tag and the tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically defines the document title, character set, styles, scripts, and other meta information.
: </p><p>As its name suggested, it is used to add the title of that HTML page which appears at the top of the browser <a href="/tags/Window_(computing)/" rel="tag">window</a>. It must be placed inside the head tag and should close immediately. (Optional) </p><p><body>: </p><p>The text between the body tag describes the body content of the page that is visible to the end-user. This tag contains the main content of the HTML document. </p><p>HTML Page Structure jgjghjhjkhkjhSSSStructurement Below is a visualization of an HTML page structure: Title </p><p><html> </p><p><head> </p><p><title>Page title
SAMPLE DOCUMENT
Note: Only the content inside the
section (the white area above) is displayed in a browser.
All HTML documents must start with a document type declaration: . The HTML document itself begins with and ends with . The visible part of the HTML document is between
and . Creating a web Page
When you type text in notepad, the text may scroll off the screen.
Start and Save an HTML Document
Basic HTML Tags
HTML tag is used to inform the browser about the version of HTML used in the document. Technically is not a tag/element, it just an instruction to the browser about the document type. It is a null element which does not contain the closing tag, and must not include any content within it.
The tag tells the browser that this is an HTML document. The tag represents the root of an HTML document. The tag is the container for all other HTML elements (except for the tag).
The
element is a container for all the head elements. The element can include a title for the document, scripts, styles, meta information, and more.
The
tag defines the title of the document. </p><p>The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. </p><p>The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, <a href="/tags/Hyperlink/" rel="tag">hyperlinks</a>, images, tables, lists, etc. </p><p>Displaying Web Pages </p><p>You can save your HTML file on the desktop or anywhere else and just double click on it to open it. If you want to display the web page in a web browser (e.g. <a href="/tags/Internet_Explorer/" rel="tag">Internet Explorer</a>) and see how it will appear on the web then follow the given steps: </p><p>ADDITIONAL RESOURCE: </p><p>Click on the given YouTube Links for further explanation. </p><p>1. Creating/Saving/Viewing an HTML file: <a href="/tags/HTTPS/" rel="tag">https</a>://www.youtube.com/watch?v=KWV41rmh9bQ </p><p>2. Basic Structure of an HTML Web Page: https://www.youtube.com/watch?v=mnwVeRMBiiA </p>
</div>
</article>
</div>
</div>
</div>
<script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var docId = 'd3f84816032a2f625586578daf4894a1';
var endPage = 1;
var totalPage = 8;
var pfLoading = false;
window.addEventListener('scroll', function () {
if (pfLoading) return;
var $now = $('.article-imgview .pf').eq(endPage - 1);
if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) {
pfLoading = true;
endPage++;
if (endPage > totalPage) return;
var imgEle = new Image();
var imgsrc = "//data.docslib.org/img/d3f84816032a2f625586578daf4894a1-" + endPage + (endPage > 3 ? ".jpg" : ".webp");
imgEle.src = imgsrc;
var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>');
$('.article-imgview').append($imgLoad);
imgEle.addEventListener('load', function () {
$imgLoad.find('img').attr('src', imgsrc);
pfLoading = false
});
if (endPage < 7) {
adcall('pf' + endPage);
}
}
}, { passive: true });
</script>
<script>
var sc_project = 11552861;
var sc_invisible = 1;
var sc_security = "b956b151";
</script>
<script src="https://www.statcounter.com/counter/counter.js" async></script>
</html> 