Text, Images & Links in HTML
COMM 305 - PROFESSOR ROBERTS Building a Web Page:
Step 1: Start with content. Quick Step 2: Give your content structure. Review Step 3: Give your structure style. HTML Tags:
Opening tag Content Closing tag HTML Tags: Close tags with a "/".
Welcome to Digital Skills 305
Basic rule of tags:Quick Review If you open it, close it. Basic Page Structure:
Quick Review Writing Comments:
Quick Review
Opening tag Comment Closing tag Block Elements:
Basic Text Block elements start on new lines, forming Elements blocks.
Space is added above and below by default. Space can be controlled with style. In-Line Elements:
Basic Text In-line elements do not create new lines. They Elements fall inside the flow of the text.
puts text in italics for emphasis. makes text bold. In October 1969, the Beatles had just released Basic Text their Abbey Road album and were in the process of disbanding. The Beatles' press office issued statements denying the rumour, saying that "Paul is still very much with us." In October 1969, the Beatles had just released their Abbey Road album and were in the process of disbanding. The Beatles' press office issued statements denying the rumour, saying that "Paul is still very much with us."Paul is Dead conspiracy
Paul is Dead conspiracy
Paul is Dead conspiracy
In October 1969, the Beatles had just released their Abbey Road album and were in the process of disbanding.
The Beatles' press office issued statements denying the rumour, saying that "Paul is still very much with us." Unordered Lists:
Use when order isn’t really important. These work like bullet points. Basic Text Elements
Some Famous Some Famous Beatles Albums
Beatles Albums- Basic Text • Sgt Peppers
- Sgt Peppers • Abbey Road
- Abbey Road Elements • The White Album
- The White Album • Revolver
- Revolver • Rubber Soul
- Rubber Soul
Use when order and structure are important. Work like an outline format. Basic Text Elements
Ordered Lists:
My Favorite Beatles
My Favorite Beatles- 1.George Harrison Basic Text
- George Harrison 2.John Lennon
- John Lennon 3.Ringo Starr Elements
- Ringo Starr 4.Billy Preston
- Billy Preston 5.Pete Best
- Pete Best 6.Stu Sutcliffe
- Stu Sutcliffe
- 7. Yoko Ono
- Yoko Ono 8.Paul McCartney
- Paul McCartney
Ordered Lists: My Favorite
My Favorite Beatles
Beatles- ???? Basic Text
- George Harrison
- John Lennon Elements
- Ringo Starr
- Paul McCartney
- Former Members
- Pete Best
- Stu Sutcliffe
Ordered Lists: My Favorite Beatles
My Favorite Beatles
1.George Harrison- 2.John Lennon Basic Text
- George Harrison 3.Ringo Starr
- John Lennon 4.Paul McCartney Elements
- Ringo Starr
- Paul McCartney 5.Former Members
- Former Members • Pete Best
- • Stu Sutcliffe
- Pete Best
- Stu Sutcliffe
Line Breaks: HTML ignores whitespace and line breaks in the document, so we need to let the browser know when we want a line break in the text Empty . Elements Differs from a paragraph
in that it’s a single line break without spacing.
Line Breaks:
My Mailing Address
You can reach me at:
EmptyProfessor Rob Roberts
School of Elements Communication
American University
Washington, DC
My Mailing Address
You can reach me at:
Professor Rob Roberts
School of Communication
American University
Washington, DC
Elements My Mailing Address
You can reach me at:
Professor Rob Roberts School of Communication American University Washington, DC Horizontal Rules:
My Meal Planner
EmptyBreakfast: Oatmeal, blueberries, coffee
ElementsLunch: Fish tacos, guacamole, water
Dinner: Cheeseburger, fried pickles, Mountain Dew
Horizontal Rules:My Meal Planner
Breakfast: Oatmeal, blueberries, coffee
Lunch: Fish tacos, guacamole, water
Dinner: Cheeseburger, fried pickles, Empty Mountain Dew
ElementsMy Meal Planner
Breakfast: Oatmeal, blueberries, coffee
Lunch: Fish tacos, guacamole, water
Dinner: Cheeseburger, fried pickles, Mountain Dew Attributes: Parameters that modify or provide functionality to an HTML element. Attributes Most attributes are optional, but some are required to make the element work properly.
Attributes Opening tag Attribute Value Closing tag
Attributes Opening tag Attribute Value Closing tag
This is my text.
Attributes
Opening tag Attribute Value Closing tag Adding Images Images are added with an empty element tag that includes a source attribute that provides a relative or absolute link to the image file. Images Best web practice is also to include an "alt" text with a short description of the image.
Adding Images
Chuck Brown Images
Chuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go." Adding Images
Chuck Brown
Chuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go."
Images Chuck BrownChuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go." Absolute URL Protocol Domain http://theknow.denverpost.com/ wp-content/uploads/2012/05/ChuckBrown1.jpg
Images Path Relative URL wp-content/uploads/2012/05/ChuckBrown1.jpg chuckbrown1.jpg images/chuckbrown1.jpg Path Adding Images
Chuck Brown
Chuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go."
Images Chuck BrownChuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go." Image Attributes
src: Location of the image, either absolute or relative
alt: Short descriptive text useful for screen readers
Images longdesc: Link to a longer description of the image
height: Height expressed as percentage or pixel value
width: Width expressed as percentage or pixel value Adding Images
Chuck Brown
Chuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go."
Images Chuck BrownChuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go." Adding Links
Links are the heart of the World Wide Web. We can take users to sections of the page, to content on our site, or to assets anywhere on Links the World Wide Web.
text to link Adding Links
Chuck Brown
Chuck Brown was a funk guitar pioneer many consider to be the Links "godfather of go-go." Learn more about Chuck Brown. Adding Links
Chuck Brown
Chuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go."
Learn Links more about Chuck Brown.
Chuck Brown
Chuck Brown was a funk guitar pioneer many consider to be the "godfather of go-go."
Learn more about Chuck Brown. Link Attributes
_self: Open in same window (default) The Make-Up on Dischord Records Links The Make-Up on Dischord Records
_blank: Open in a new window or tab
The Make-Up on Dischord Records Types of Links
external: Link to a page or asset off your site Links relative: Link to a page or asset within your site anchor: Link to a specific point inside a page email: Links to an email address. Opens default mail program External Links External links take your user to content that’s not on your site. Links Use the absolute URL including "http://"
The Make-Up on Dischord Records Relative Links
Relative links link to content on your own site.
Best practice is to use a relative link when Links linking to content on your site.
Rob's tribute to The Make-Up Anchor Links Anchor links jump the user to a specific point on your page. Links These can be useful when helping users navigate a long page.
The Make-Up Anchor Links
Step 1: Designate a destination with an "id" attribute. You can apply this id to almost any element, but often smart to use a subhead. Links
A Guide to DC Punk Bands
Fugazi
blah blah blah
The Make-Up
blah blah blah
The Rites of Spring
blah blah blah
Anchor LinksStep 2: Create anchor links to jump to content.
A Guide to DC Punk Bands
LinksJump to Fugazi | The Make-Up | The Rites of Spring
Fugazi
blah blah blah
The Make-Up
blah blah blah
The Rites of Spring
blah blah blah
Anchor Links We can also use anchor links when we use a relative or absolute URL to push people directly to the content we want them to see.Links Read about Fugazi on my DC music page
Fugazi’s Discography Email Links Email links allow the user to contact you or others. Opens the default email program and fills in the email address. Links Email me