Links & Layout
Links
-
Links are the defining feature of the web because they allow you to move from one web page to another — enabling the very idea of browsing or surfing.
-
Links are created using the
<a>element. Users can click on anything between the opening<a>tag and the closing</a>tag. You specify which page you want to link to using the href attribute. -
Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files.
-
If you want a link to open in a new window, you can use the target attribute on the opening
<a>tag. The value of this attribute should be _blank. -
To link to an element that uses an id attribute you use the
<a>element again, but the value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element you want to link to.
Layout
- CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.
- If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.
- CSS has the following positioning schemes that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning.
- To indicate where a box should be positioned, you may also need to use box offset properties to tell the browser how far from the top or bottom and left or right it should be placed. (You will meet these when we introduce the positioning schemes on the following pages.
- The z-index property allows you to control which box appears on top.
- Different visitors to your site will have different sized screens that show different amounts of information, so your design needs to be able to work on a range of different sized screens.
-
Resolution refers to the number of dots a screen shows per inch. Some devices have a higher resolution than desktop computers and most operating systems allow users to adjust the resolution of their screens.
- Pages can be fixed width or liquid (stretchy) layouts.
