HTML5- Create divisions in a web page
Download as PPTX, PDF4 likes4,163 views
The document discusses how to create divisions in a web page using <div> tags and HTML5 semantic tags. It provides information on: 1) Using <div> tags to partition a web page into sections like headers, navigation menus, main content areas, and footers for layout. 2) The advantages of division-based layouts over tables for structuring web pages. 3) Additional HTML5 semantic tags like <header>, <nav>, <article>, and <aside> that can be used to identify different content blocks.
HTML5- Create divisions in a web page
- 1. Create divisions in a web page Information and CommunicationTechnology β 8
- 2. Objectives β’Understand <div> tags and the new HTML semantic tags in breaking a page into sections; β’Learn to place the division in a specified location within your page; and β’Create a division-based layout to your web page.
- 3. GoodWeb Design Basics HTML provides you a lot of ways to layout your page better.This lesson will teach you how to use the <div> tag effectively. We will also learn the HTML5 new elements to make appropriate and meaningful divisions to your page.
- 5. Good Web Design Basics The basic idea behind good web design is to partition your web page into various sections and columns to give it a professional appeal and to make it more user-friendly. β’ Creating a template that you can use on all your web pages to render a familiar look every time a visitor goes to a different part of your site. β’ Creating a header section that runs across the top of your page in order to designate a prominent place your websiteβs logo, slogan, graphic, etc. β’ Creating multiple columns that are clearly divided your webpage into various logical sections such as: β’ Menu Column β should contain a list of links to other pages on your website. β’ Main Content Column βholds that text you are currently reading.This column should render the main text and graphics which defines what your web page is about. β’ Creating a footer section to hold copy right information and important links.This help to create visual ending to your web page and provide other important sections or link.
- 6. Advantages of Division-based Lay-out β’ The most popular way of structuring a web page is by creating tables.This method of partitioning a web page has become obsolete. β’ Web designers today are geared towards a more appealing wat of separating content into sections which is called the division- based layout. β’ A division-based layout defines the area of page with <div> tags. Each part of the page you want to format separately should b a division.
- 7. Table vs DIVs β’ Most websites have put their content in multiple columns. β’ Multiple columns can be created by using <div> or <table> elements. β’ Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool! β’ The div element is used for grouping HTML elements and for creating rows and columns with the help of CSS. Table div
- 9. Advantages of the Division-based Layout β’ You can place layout styles externally, and then make the style changes to many pages at once simply by modifying the style sheet. β’ It reduces the number of lines of code needed to produce a page. What is <div> tag? β’ The <div> tag is used to establish separate divisions or areas of your page. β’ The <div> tag is used to group block-elements to format them with CSS.
- 10. Masthead/header andTop Navigation Web Content body (can still be divided into sub section) Bottom Navigation and Copy Right Notice
- 11. If you layout the web page using <div> tags, you can break thus page into general parts: the masthead/header or the top navigator bar, the content body text, the bottom navigation bar, and the copyright notices. Masthead is used as the title of a newspaper or periodical as it appears across the first page, front cover, or title page issue. On a website masthead represents the graphic image or text title on the top of the web page.
- 12. The id attribute β’ The id attribute can be used with any tag element. When used along with the <div> tag, it will identify and define an area of your page. β’ Things to remember: β’ As a unique identifier, the idβs value should only be used once on your page. β’ Start the id value with a letter followed by any of these: letters, number digits (1- 9), dashes (-) and underscore ( _ ). Donβt use space or special characters. β’ The value is case-sensitive. <div id= βtitleβ> is different from <div id= βTitleβ> Syntax: <div id =βmastheadβ> . . . . . . . </div> <div id =βtop-navigationβ> . . . . . . . </div> <div id =βweb-contentbodyβ> . . . . . . . </div> <div id =βbottom-navigationβ> . . . . . . . </div> <div id =βcopyright-sectionβ> . . . . . . . </div>
- 13. Creating Division to your Page The output does not show a layout.You can clearly see how your page is divided into different sections.
- 14. Page Layout with <div>Tags β’ Putting a style in the <div> tag will allow you to set the appearance or how your division of your web page behaves on the screen.You can put various style such as the following: β’ Border β’ Background β’ Margin β’ Width β’ Height
- 15. Web Layouting with <div>Tag Styles The <div> tag is general-purpose tag. Though, without the id attribute of each <div> tag, itβs hard to tell what section of document each <div>.
- 16. The HTML5 Approach β’ You have learned in Lesson 4 the new Semantic tag that HTML5 offers. It provides a set of tags that clearly defines blocks of content that make up β’ your webpage. β’ Header βThis is your web titles, taglines, logo, etc. β’ Section βThis is meant to identify substantial portions of content on the webpage. β’ Article βThis identifies major segments of content within a web page. β’ Aside βThis tag can be used in two different contexts. β’ Footer βThis is for the copyright section; it can include navigational links, or contact information. β’ Nav β this is intended for navigational links.
- 17. Set <aside> β’ The <aside> tag is a new element for HTML5.The context of this element is whether to use it inside or outside the <article> element. β’ You can use the <aside> tag inside the <article> element or β’ You can use it outside the <article> element. <aside> element being used as a pull-quote inside the article. Syntax: <article>. . . <aside> . . <article> Syntax: <body> <section> <aside>. . . </aside> <article>. . .</article> </section> </body> <aside> being used outside the article.This can be placed as another division to your page.
- 18. Positioning a Division β’ If you insert an additional <aside> division to your web page layout, and place your division beside another either to the right or left, you can easily use the float style rule. Positioning Style - if you want to place a division on a specific spot of your page, you can use the position style rule. There areThree possible values for a position style rule: 1. Static - An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. 2. Absolute value β position:absolute ;This value specifies a fixed position with the respect to its parent element or tag. Usually, the <body> tag as the parent element. 3. Relative value β position: relative,This value is compensated from the elementβs natural position.Other elements on the page are not affected, even if the new position cause overlap. 4. Fixed value - position:fixed;This value specifies a fixed position within the browser window that doesnβt change even when the display is scrolled up or down.
- 21. Position Style β’ You must use each of these values in combination with top, right, bottom, and /or left style rule that specifies the location to which the position style rules refers. Example: To position a section at exactly 100px from the top of the page and 200px from the left side, the syntax should be: <section style=βtop:100px;left:200px;position:absoluteβ>
- 22. Horizontal Lines β’ Horizontal Lines can be useful as a visual dividers between sections of text in a web page. β’ You can add a horizontal line after your header then add another horizontal line before your footer.This will clearly show your division in your web page. β’ You can simply add the horizontal line <hr> (horizontal rule) tag where you want the line to appear.