0% found this document useful (0 votes)
7 views

Adding Content To A Webpage

Uploaded by

Eliandro Santos
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views

Adding Content To A Webpage

Uploaded by

Eliandro Santos
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

General Assembly

STUDY GUIDE

ADDING CONTENT TO A WEBPAGE


Overview
A webpage is nothing without content - the words, images, and links that a user sees. A webpage’s content is placed within the <body> tags of
your HTML boilerplate.

HTML Content Elements


Headings
» There are six options for heading tags:<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
» Headings tell users what they’re seeing.
» Tags range from <h1> to <h6>, with <h1> being the largest possible size and <h6> being the smallest size.
» <h1> designates the most important element on the page.
» Most sites should only have one <h1> tag.

Paragraph
» Indicated with the <p> tag.
» Text displays in a smaller, more standard size.

Hyperlink / Anchor Element


» A hyperlink is a bit of text that, when clicked, takes the user to another location on the same page, or to a completely different website.
» Basic format: <a href="web address">display text</a>
» Basic parts:
The anchor tag, <a>, indicates that you’ll be linking to somewhere else.
href stands for "hypertext reference" and is used to designate the website address you’ll be linking to.
"web address" would be substituted with the address of the site to which you are linking.
Display text is where you write the text you’d like the user to see instead of the web address.
» Additional elements:
You can add target="_blank" to the end of the anchor tag tell the browser to open the page in a new window or tab.
With no target= element, the page will open in the same window, taking the user away from the current page.

Lists
» Lists can be ordered - the <ol> tag - or unordered - the <ul> tag.
» An ordered <ol> tag will create a numbered list.
» An unordered <ul> tag will create a bulleted list.
» Give each item in the list its own list item tag, <li>, to indicate that each one gets its own line.
» <ol> or <ul> is always the parent element; <li> is always the child element.

Image
» The HTML image tag uses a web address to link to an image, so images can only be added to an HTML file if they’re hosted somewhere
online.
Basic format: <img src="web address" alt="alternative text" width="###" height="###" />.
»
»
»
» Basic parts:
The image tag, <img>, indicates you’ll be adding an image. It’s self-closing, so it closes itself without adding /> at the end of your
statement.
src stands for "source" and indicates where the image comes from. This is usually a url.
alt stands for "alternative text". This is text that describes the image. A screen reader used by a visually impaired site visitor would
read this text aloud.
width and height specify the size of the image in pixels. (Replace ### in the basic format above with an exact number of pixels.)

You might also like