My Website

# Web Design # HTML # Boilerplate In web design, **boilerplate code** or **boilerplate** refers to a section of HTML that must be included on each page with little or no alteration. the most basic HTML boilerplate might look something like this: ``` My Website ``` #### But what does it all mean? Let's start at the top with ``. This piece of code tells the browser that the page it's about to read is written in HTML. the DOCTYPE declaration isn't an HTML tag, it's just information that the browser needs to know. in older versions of HTML, this piece of code had to be much more complicated. Next, we have ``. This is the first HTML tag. It's an opening tag (the closing tag `` is at the end of the boilerplate). This tag has two **attributes**, `lang` for language which is `en` for English, and `dir` for direction with is `ltr` for "left to right". The `` tags represent the root of an HTML document. The `` tag is the container for all other HTML elements. The `` tags are a container for metadata and is opened and closed after the `` opening tag. Metadata refers to information about an HTML document. The metadata is not shown in the browser viewport. The document title, character set, styles, scripts, and other meta information are often defined via metadata. The `<meta charset="utf-8">` tag defines an element of metadata, in this case `charset` for the character set, `utf-8` is the most common character encoding method used on the internet today, and is the default character set for HTML5. other meta tags that might be included are: `<meta name="description" content="Free Web tutorials">` `<meta name="keywords" content="HTML, CSS, JavaScript">` `<meta name="author" content="John Doe">` `<meta name="viewport" content="width=device-width, initial-scale=1.0">` A `` tags is used to set the name of the page, that will appear in the browser tab, or bookmark when saved. The `<body>` tags are very important. Everything that is between these tags is displayed in the viewport. </body></html> # HTML elements – The basics An HTML element is is a piece of content (usually text) that is enclosed within tags. The tag name defines what type of content it is and how it should be displayed. Some common tags you'll use include: `<h1></h1>` Defines a Heading `<p></p>` Defines a paragraph `<a href="#"></a>` Defines an anchor link Most HTML elements have an opening, and closing tag, the content sitting between them, for example: `<h1>This is a heading</h1>` `<p>This is my first paragraph</p>` however, there are a few tags that don't have a closing tag. for example: `<br>` This is used to insert a line break. `<hr>` This with insert a horizontal rule. `<img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e" alt="ginger cat">` the `img` tag is used to insert an image. #### Attributes Attributes are often included in an HTML open tag to define more information about the content. Attributes are included using a name and value pair. In the examples below the attribute href for "hypertext reference", defines the location the anchor link should go when the text "visit google" is clicked. `<a href="https://google.com">visit google</a>` in this image element: `<img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e" alt="ginger cat">` the `scr` or "source" attribute is used to define the location of the images to display. The `alt` attribute defines alternate text for when the image cannot be displayed or viewed. alt attributes are important for the accessibility of visually impaired readers. another common attribute that is often included in an HTML tag is `class`. `class` attributes make it possible to differentiate different types of content with the same tags and style them accordingly in CSS. the `id` attribute is used to define a unique identifier for an HTML element. This makes the element easy to select using javascript and can be navigated to using anchor links. [![image-1652918480825.png](https://bookstack.chesterwhitwell.co.nz/uploads/images/gallery/2022-05/scaled-1680-/image-1652918480825.png)](https://bookstack.chesterwhitwell.co.nz/uploads/images/gallery/2022-05/image-1652918480825.png) ### Block vs inline The browser has two ways to display elements in the viewport. **Block** elements always start on a new line and use the full width of the viewport. Examples of block level elements include: - `<p>` - `<ol>`, `<ul>`, `<dl>` - All headings `h1`–`h6` - `<article>`, `<section>`, `<div>` **Inline** elements display in a line. They do not force the text after them to a new line. An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line. Examples of inline elements: - `<a>` - `<strong>`, `<em>`, `<b>`, `<i>`, `<q>, <mark>` - `<span>` The `img` tag is also an example of an inline element, meaning that unless they are floated (covered later in CSS) they will flow horizontally with text and other inline elements. Take a look at the codepen below, notice that each of the paragraph tags are presented as a block and the anchor tag stays inline. Try moving the img tag inside one of the paragraph tags. ***What do you think will happen?*** <iframe allowfullscreen="allowfullscreen" frameborder="no" height="540" scrolling="no" src="https://codepen.io/chesterwhitwell/embed/XWZRMvq?default-tab=html%2Cresult&editable=true" style="width: 100%;" title="Untitled" width="300"></iframe> ***Did you notice that the image can sit between words in the paragraph?*** the default display properties of an element can be changed using CSS styles. #### Nesting Nesting in HTML refers to placing elements inside other elements. for example placing an <img> element inside a <p> element. when creating a list, the line items (<li> tags) are nested within <ul> or <ol> tags. there are a couple of rule for nesting. 1. You can't open a tag in one element and close it in another, make sure you're closing tags are in the correct order. 2. You shouldn't nest block elements inside inline elements. ```HTML <a href="/about"><p>The about page</p></a>  <p><a href="/about">The about page</a></p>  <p><a href="/about">The about page</p></a>  ``` # More tags Now with an understanding of the fundamental structure of and HTML page, let's look at a few more common tags and their uses. #### Text formatting We previously looked at the <p> tag and its use for defining paragraphs. sometimes we need to highlight one or just a few words within a paragraph. That's where text formatting tags can be useful. these formatting elements are designed to highlight special types of text: - `<b>` - Bold text - `<strong>` - Important text - `<i>` - Italic text - `<em>` - Emphasized text - `<mark>` - Marked text - `<small>` - Smaller text - `<del>` - Deleted text - `<ins>` - Inserted text - `<sub>` - Subscript text - `<sup>` - Superscript text ***Try adding some of the other formatting tags to the paragraphs in the codepen below.*** <iframe allowfullscreen="allowfullscreen" frameborder="no" height="540px" scrolling="no" src="https://codepen.io/chesterwhitwell/embed/qBxmjKr?default-tab=html%2Cresult&editable=true" style="width: 100%;" title="text features" width="300"></iframe> #### heading tags Heading tags are as the name suggests used to define headings. Heading tags range from `<h1>` (most important) to `<h6>` (least important). The block elements so will start on a new line and use the full width of the viewport. take a look at the code pen below to their default styling. ***Try adding a new heading after heading 6, using your name.*** <iframe allowfullscreen="allowfullscreen" frameborder="no" height="540px" scrolling="no" src="https://codepen.io/chesterwhitwell/embed/vYdmZOx?default-tab=html%2Cresult&editable=true" style="width: 100%;" title="Heading tags" width="300"></iframe> #### Lists The two most common types of lists used in HTML are ordered (or numbered) lists or unordered lists. unordered lists are displayed with a bullet point by default. A `<ul>` tag is used to define an unordered list and an `<ol>` tag is used to define an ordered list. items in the list are written within `<li>` tags. ***Try adding some new items to lists in the code pen below.*** ***What happens if you add a step between 2 and 3 of the ordered list?*** <iframe allowfullscreen="allowfullscreen" frameborder="no" height="540px" scrolling="no" src="https://codepen.io/chesterwhitwell/embed/oNEWwBB?default-tab=html%2Cresult&editable=true" style="width: 100%;" title="Lists" width="300"></iframe> ***notice how the list numbering will always be in order.*** There is another list type called a description list, which list of terms, with a description of each term. The `<dl>` tag defines the description list, the `<dt>` tag defines the term (name), and the `<dd>` tag describes each term, for examples: ```HTML <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> ``` ***Try copying the code above into the previous codepen to see the results.***