Skip to content

Latest commit

 

History

History
33 lines (22 loc) · 1.79 KB

File metadata and controls

33 lines (22 loc) · 1.79 KB

Layout

HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the web pages can be arranged. Web-page layout works with arrangement of visual elements of an HTML document.

HTML Layout Elements

header - Defines a header for a document or a section. nav - Defines a set of navigation links. section - Defines a section in a document. article - Defines an independent, self-contained content. aside - Defines content aside from the content (like a sidebar)

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.

The HTML < a> tag defines a hyperlink. It has the following syntax:

< a href=”url”>link text< /a>

The most important attribute of the < a> element is the href attribute, which indicates the link’s destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red

CSS layout

At this point we’ve already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it’s time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about