HTML Creating Web pages

HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers

Why learn HTML? HTML is the backbone of more complex web programming languages, such as XHTML. Learning it gives you an understanding of how the other languages work, and may even allow you to edit some of them effectively without knowing the specific language. While many large organizations use content management systems to automate the production of web pages, there are limits as to what they can produce. Knowing HTML allows you to get a page to look exactly how you want it, within the confines of the system.

What you need to create a Webpage using HTML To create a page: - A text editor (TextWrangler, TextEdit, TextMate, BBEdit) - A Web browser

First things first Whenever you begin a project, you need to remember to keep things in order. The best way to do that is to create a folder to store everything before you start editing any files: - Go to the desktop, and right-click anywhere on the background. - Select “New Folder”. - Name the folder something related to the project you're working on, for example, the HTML resume assignment could be named “HTML” or “Resume” or “HTML resume”. - Be sure to save all of your files into this folder. - You can compress the folder to create a single file that you can easily to yourself or others. Right-click the folder, and select “Compress”, which creates a.zip file on your desktop.

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

Header/body

Page title ENTER YOUR PAGE TITLE HERE

Body text My Sample Web Page Enter text you want to show up in the browser window here.

Page color Color values are specified in hexadecimal code; Google it to find color keys. My Sample Web Page (For a solid background color) (For a picture file background) (To change the default color of text) Enter text you want to show up in the browser window here.

Spacing Single return Tuesdays & Thursdays, 7:30-9:20 a.m. Location: Cronkite 354 Instructor's Paragraphs 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. 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.

Headers These tags are used to make text much larger than normal. Heading text = Heading text

Formatting tags: Bold, italics, underline = strong = emphasis = underline For example: Times: = Times: The Daily Show = The Daily Show Hours of operation = Hours of operation Other examples of formatted text

Nested tags You can use more than 1 tag to format text. Example: Coding for The Arizona Republic The Arizona Republic

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: Text/image If you want to make the link open in another window/tab, you can add a little bit to the link code: Text/image

Creating a text link New York Times OR My favorite news source is New York Times. New York Times

Creating an link TEXT For example: me

Save file as.html Save your file as a plain text document (not in Word) with the extension “.html”. You may see files on the Web that have a “.htm” extension. There is no difference between “.html” and “.htm” in the way a browser looks at the file, but “.html” is more common.

Try formatting a text document Go to asujmc305.wordpress.com and copy the text.

Ordered lists A list of numbered items Example: The top 3 best downtown restaurants: 1.Pizzeria Bianco's 2.Athenian Express 3.Matt's Big Breakfast The top 3 best downtown restaurants: Pizzeria Bianco's Athenian Express Matt's Big Breakfast

Unordered lists A list of un-numbered or bulleted items Example: JMC305 covers Social media Video Web design JMC305 covers Social media Video Web design

Inserting images

Tables Tables can be used to arrange "columnar" data, anywhere you have multiple rows and columns of text. = table = table header = table row = table data Year Sales 2000 $18M 2001 $25M 2002 $36M

Saving webpages as.pdf files - Choose to print the page. - Instead of actually printing, click on the “Save as PDF” button in the lower left-hand corner of the print window. - Choose a name and a destination for the.pdf file.