HTML Basics Customizing your site using the basics of HTML

What is HTML? HTML (Hyper Text Markup Language) is the building block of all websites. HTML forms the skeleton of a webpage, and is used along with CSS (Cascading Style Sheets) to create the structure and design of websites. HTML uses tags to define all of the different elements of a page, such as headings, paragraphs, images, and links.

HTML Tag Format Most HTML tags have opening and closing tags that wrap around their content, and look like this: This is a paragraph of text. It is wrapped by opening and closing paragraph tags. Some HTML tags are self-closing, and look like this: (This tag creates a line break.)

How is HTML Written and Rendered? HTML can be created using any text editing software, such as Notepad (Windows) or TextEdit (Mac). Once HTML code has been written, and the file has been saved with a.html extension, any web browser (Internet Explorer, Firefox, Chrome, Safari, etc.) can render it.

Lets build a web page! Open Notepad First, well add tags to define the beginning and ending of our HTML document:

Lets build a web page! Next, well add tags to define the head of our page. Content in the head doesnt necessarily appear on the page, but it provides information to the web browser:

Lets build a web page! Inside the head tag, we add a title, which is displayed in the browser window or tab: This is the title of my page

Lets build a web page! Next, we need to add our body tags, which define the content that will show up in the body of the page: This is the title of my page. This is the content of my page. So far, its only text. Weve built a web page! But, its not very interesting, is it?

Formatting Text First, lets see how to format our text. First, well put each sentence of our text inside paragraph tags, so that the browser will render them as paragraphs: This is the content of my page. So far, its only text. (If we didnt wrap our content in tags, or separate it with tags, there would be no breaks between one line and the next – everything on the page would run together.)

Formatting Text Next, lets add some formatting to our text. We can change font styles using HTML. (Other text formatting, such as colors, fonts, and size are changed with CSS.) or = bold text or = italic text

Formatting Text Lets wrap some of our text with tags to change the font styles: Heading 1 This is the content of my page. So far, it's only text.

Formatting Text We can also use predefined heading tags to format the headings on our page: Heading 1 This is the content of my page. So far, its only text. There are six heading tags: h1, h2, h3, h4, h5, h6 Heading tags run from largest to smallest, meaning that h1 is very large, and h6 is very small Heading tags are useful for search engine optimization

Adding Images Images can be a great way to add color and visual interest to pages. The tag is used to insert images; this tag requires the use of attributes. src=image url – defines the location of the image file, so the browser knows where to find the image. alt=image description – a brief description or title for the image

Adding Images Lets add an image to our site: Heading 1 This is the content of my page. So far, it's only text.

Adding Images We can make some changes to our image by adding additional attributes: width=image width in pixels or percentage height=image height in pixels or percentage Be careful to adjust width and height proportionally to avoid problems with aspect ratio Using percentages is preferable for adaptive/responsive design Width and height dont both need to be included; the browser will calculate the value of the missing attribute

Adding Links Links are one of the most important elements of any webpage. Links can take visitors to pages within our site, external sites, PDF files, Word documents, etc. The tags for a link wrap around the text, image, or other elements that visitors will click on to reach the link. My Page!

Adding Links Linking to a page within our site (a relative link) requires a path to that page relative to the current location: My page! Linking to an external site (absolute link) requires the entire URL of the site we are linking to: Visit Google (The absolute URL for a link can be copied from the address bar of your browser.)

Adding Links Lets insert a link that points to the UVU Web Community site. Since we are linking from a file that is stored locally on our computer, well need to use an absolute link, so the browser knows that were linking to a file that is not stored on our computer: Heading 1 This is the content of my page. So far, it's only text. Web Community

Lists Unordered Lists are useful for displaying bulleted lists of content. The tags wrap the entire list, and tags wrap each list item. Web Community List Item One List Item Two Ordered Lists work the same way, but they generate a numbered list and are wrapped with tags.

Div Tags Web pages are often organized using tags, which divide the page into different sections. This allows for a lot of customization using CSS, because each can be styled and moved separately from others on the page. tags can wrap a single page element, or a group of elements. tags can also be nested tags generally require the use of CSS; they arent very useful without it.

A final note…CSS Styles, IDs, and Classes HTML tags can be formatted using the style attribute and CSS styles: This text is blue and centered on the page. However, the preferable method for CSS styling is using external style sheets, along with IDs and classes to define styles and formatting – but thats a topic for another training session.