Adding Text Markup
These are your accomplishments so far!!
- Researched and defined basic markup tags
- Structured a basic html document
- Saved the document as an .html document locally
- Display the .html document in a web browser.
Active Learning: Take some time to review the resources on this page experiment with the tags that we covered and the new tags defined on this page. Add the code to your current page, change the text, check the areas where spacing is translated in the web browser, add additional paragraphs and headers, etc.
1. Paragraphs
The HTML <p> element defines a paragraph. Paragraphs require an opening and a closing tag.
See the Pen Paragraphs by Sarah (@vanwars) on CodePen.
W3Schools Reference: http://www.w3schools.com/html/html_headings.asp
2. Headings
Headings are defined using the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important. Like paragraphs, headings require an opening and a closing tag. Headings show document structure: users skim web pages by looking at the headings, and search engines use them to index the structure and content of your web pages.
See the Pen Headings by Sarah (@vanwars) on CodePen.
W3Schools Reference: http://www.w3schools.com/html/html_headings.asp
3. Line Breaks & White Space
Line breaks are defined using the <br> tag. Use this tag if you want force a line break (a new line) without starting a new paragraph.
See the Pen XKpQNN by Sarah (@vanwars) on CodePen.
W3Schools Reference: http://www.w3schools.com/html/html_paragraphs.asp
4. Text Emphasis
<span>, <em>, and <strong> tags are frequently used to highlight or emphasize text.
See the Pen JKEVby by Sarah (@vanwars) on CodePen.
W3 Reference(tag): http://www.w3schools.com/tags/tag_em.asp
W3Reference(strong): http://www.w3schools.com/tags/tag_strong.asp
5. Horizontal Rules
<hr> tags are used to create separators.
See the Pen PzWgWX by Sarah (@vanwars) on CodePen.
6. Linking to External Pages
The <a href> is an anchor tag and an abbreviation for “hyper text reference”. After the <a href>, you need to place the full html address. This will be the place that the user will be directed after clicking. Be sure to include the “http://” within the quotes.
The second part of the external link tag, will be the text that shows up on the web page. You can choose any name for the link title, although it is recommended to choose a name that is closely related to the page that is being referenced.
In the second example, the link includes a target=”_blank”. The target attribute references where to open the document. There are many options for targets. In this example, the “_blank” target will open the link with a new browser window or tab.
See the Pen LRYyKz by jhoffmanbcc (@jhoffmanbcc) on CodePen.
6. Linking to Images
See the Pen
linking images by jhoffmanbcc (@jhoffmanbcc)
on CodePen.
W3Schools Reference: http://support2.constantcontact.com/articles/FAQ/1801
7. Modifying the Size of Images
We can change the size of the image by adding height and width attributes.
The “alt” attribute specifies an alternate text for the image if the image can not be displayed. This has two significant purposes.
- “alt” tags are useful for people that use accessibility software (ie. visually impaired).
- “alt” tags help search engines understand what your picture is. This will help your picture show up in a image search.
See the Pen Image-Size by jhoffmanbcc (@jhoffmanbcc) on CodePen.