Post on 14-Dec-2015
HTML
Creating Web pages
HTML
HyperTextMarkupLanguage
Not programming, but a markup language using tags to format text in Web browsers
What you need to create a Webpage using HTML To create a page:- A text editor (TextEdit, TextMate, BBEdit)- A Web browser
Once your page is ready to be pushed live:- FTP software
HTML tags
Tags give the Web browser instructions on how to display elements of a Web page, whether it's text, pictures, video clips, or hyperlinks to other Web pages.
- Signified by "< >"- Usually contain and opening and closing tags- Lowercase
Starting an HTML document
<html>
</html>
Header/body
<html>
<head> </head> <body> </body>
</html>
Page title<html>
<head> <title> ENTER YOUR PAGE TITLE HERE</title></head> <body> </body>
</html>
Body text
<html>
<head> <title>My Sample Web Page</title></head> <body>
Enter text you want to show up in the browser window here.
</body></html>
Spacing
<br /> Single return
Tuesdays & Thursdays, 7:30-9:20 a.m. <br />Location: Cronkite 316 <br />Instructor's e-mail: stephen.harding@asu.edu <p></p> Paragraphs
<p>Prerequisites and expectations: This class is required of all journalism majors in the new curriculum. Students must be in the professional program and have completed JMC 201. </p> <p>Course goals: This class will introduce students to journalism in an online environment. Students will gain an understanding of the capabilities and attributes of good online journalism, including interactivity, functionality, navigation and innovation. </p>
Headers
These tags are used as headers: They are bold and have returns automatically
<h1>Heading text</h1> = Heading text<h2>Heading text</h2> = Heading text<h3>Heading text</h3> = Heading text<h4>Heading text</h4> = Heading text<h5>Heading text</h5> = Heading text
<h6>Heading text</h6> = Heading text
Formatting tags: Bold, italics, underline<b></b> = bold <strong></strong> = strong<i></i> = italics<em></em> = emphasis <u></u> = underline For example: <strong>Times: </strong> = Times:<em>The Daily Show</em> = The Daily Show<u>Hours of operation</u> = Hours of operation
Other examples of formatted text
Nested tags
You can use more than 1 tag to format text. Make sure you sandwich the text with them.
Example:Coding for The Arizona Republic
<strong><em>The Arizona Republic</em></strong>
Creating links to other Websites
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.
To create a link, you'll need the URL of your target, and the text/image you want to link:
<a href="URL">Text/image</a>
Creating a text link
<a href="http://www.nytimes.com">New York Times</a>
New York Times
OR
My favorite news source is <em><a href="http://www.nytimes.com">New York Times</a></em>.
My favorite news source is New York Times.
Creating an e-mail link
<a href="mailto:EMAIL ADDRESS">TEXT</a>
For example:<a href="mailto:stephen.harding@asu.edu">E-mail me</a>
E-mail me
Save file as .html (or .htm on a PC)
Save your file as a plain text document (not in Word) with the extension .html
Try formatting a text document
Go to asujmc305.wordpress.com and copy the text. Go to TextEdit >> Preferences and select "Plain Text"
Ordered lists
A list of numbered items Example: The top 3 best downtown restaurants:1. Pizzeria Bianco's2. Athenian Express3. Matt's Big Breakfast
The top 3 best downtown restaurants:<ol><li>Pizzeria Bianco's</li><li>Athenian Express</li><li>Matt's Big Breakfast</li></ol>
Unordered lists
A list of un-numbered or bulleted items Example: JMC305 covers• Social media• Video• Web design
JMC305 covers<ul><li>Social media</li><li>Video</li><li>Web design</li></ul>
Inserting images
<img width="" height="" src="IMAGE LOCATION" align="">
TablesTables can be used to arrange "columnar" data, anywhere you have multiple rows and columns of text. <table> = table<th> = table header<tr> = table row<td> = table data
<table border="1" cellpadding="10"><tr><th>Year</th><th>Sales</th></tr><tr><td>2000</td><td>$18M</td></tr><tr><td>2001</td><td>$25M</td></tr><tr><td>2002</td><td>$36M</td></tr></table>