Scribd Logo
Importer

Bienvenue sur Scribd !

  • Creating HTML Pages

    Transféré par

    sarahwk
    41 vues7 pages
    An HTML page consists of text (your copy) and tags (directions to how your copy should look, e.g., bold; in red). To change the fonts and colors and add images and links, you'll need to know the following tags.

    Description originale:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOC, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    An HTML page consists of text (your copy) and tags (directions to how your copy should look, e.g., bold; in red). To change the fonts and colors and add images and links, you'll need to know the following tags.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    41 vues7 pages

    Creating HTML Pages

    Transféré par

    sarahwk
    An HTML page consists of text (your copy) and tags (directions to how your copy should look, e.g., bold; in red). To change the fonts and colors and add images and links, you'll need to know the following tags.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    BASIC HTML An HTML page consists of text (your copy) and tags (directions to how your copy should

    look, e.g., bold; in red). To change the fonts and colors and add images and links, youll need to know the following tags. Basic HTML Page Structure At its simplest, an HTML page consists four tags. All tags must be in lower case. <html> and </html> <html> tells your browser that an HTML page is starting. </html> tells the browser that the page has ended. <head> and </head> Everything thats typed between these two tags does NOT show up on the web, so use this section for font information, background color, etc. <title> and </title> These are the three or four words that appear in the tab of your browser. Untitled appears if you dont put anything in the title.

    <body> and </body> You put all of the text, images and graphics in the body section, in between these two tags. HTML Tags Used in the Template This section has further information about the HTML tags in the template. 1. Colors You can specify colors for the page or type in three different ways: By hex value (preferred): This is a six-digit code with numbers and/or letters. Example: #ffff00 You can find hex value codes on websites. Heres one: http://www.w3schools.com/html/html_colornames.asp By name Here are the standard color names that will be recognized by all browsers: black; white; silver; gray; lime; olive; green; yellow; maroon; navy; red; blue; purple; teal; fushcia; aqua; orange Fonts Popular web type fonts are: verdana, arial, times new roman; comic sans ms, courier new, georgia, helvetica, impact; trebuchet ms

    2.

    Indicate the weight of the font with: normal, strong, italic You can also tag a word for bold with <strong> and </strong> (<b> and </b> may also work), or for italics with <em> and </em> (or <i> and </i>). 3. Other common tags used for formatting Tag Description <br /> Breaks to the next line (note: there is just one tag, not two) <p> and </p> Paragraph; also can be used to break to the next line &nbsp; Inserts a space. HTML will not put in a space if you use the space bar. <hr /> inserts a line, or a horizontal rule (one tag, not two)

    4.

    Inserting photos or graphics 1. Save your photo or graphic file to your hard drive. 2. Write the following tag where you want to insert the photo. <img src=images/myphotofile.jpg width=100 height=100 alt=My photo /> Notes: images is the name of the folder on the USC server where you will upload your photo myphotofile.jpg is the name of your photo or graphic width and height are the sizes that you want your photo to appear alt are the words that will appear on your site if you mouse over a photo. Its a good place to put a caption or a quick explainer (ex: alt=President Obama) 5. Inserting links E-mail: Write the following tag where you want to insert a link to an e-mail address. <a href="mailto:username@usc.edu">E-mail me at username@usc.edu</a> This is the actual link. This is the text that will appear on your webpage, underlined and linked. You could just put E-mail me.

    Websites, blogs: Write the following tag (an absolute link) where you want to insert a link to your story, another website, your blog, etc. When linking to a page thats on a blog, use a Permalink (a URL that doesnt change) if possible. <a href=http://blogs.uscannenberg.org/firstname_lastname/2008/11/story-headline.html target="_blank">Print Story 1</a> This code opens the link in another tab. This is the text that will appear on your webpage, underlined and linked.

    Other pages that you upload: Use this tag (a relative link) if youre linking to an HTML page that youre uploading to the same folder where your index.html file is. <a href="print2.html" target="_blank">Print Story 2</a> To test this out: 1. Open a new WordPador Textpad file and save it as test.html (Unicode Text Document or Text Document-MS-DOS Format). 2. <html> <head> <title>My test page</title> </head> <body> This is a test page. </body> </html> 3. 4. 5. Save your file to your hard drive. Open up a browser program such as Internet Explorer. Go to File, then Open (Internet Explorer). Find the file on your hard drive. You will then see your page as it will look in a browser. IT IS NOT LIVE ON THE INTERNET -- you still need to FTP it for that. Type the following:

    Create a story page. A story page is a web page that has a single story on it. A story page can be very simple. You can just cut and paste your story from your Word document and add breaks <br /> or paragraphs <p> and </p>. Or, you can play around with HTML and add different font sizes, colors, rules, etc. using the codes from your story home page. Create the WordPad HTML file. Example: printstory.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/transitional.dtd> <html> <head> <title>Student Name - JOUR 309</title> <style type="text/css"> body {background-color: purple; color: #000000;} h1 {font-family: verdana; font-size: 16pt; color: #800000; font-weight: bold;} h2 {font-family: verdana; font-size: 14pt; color: red; font-weight: bold;} #body {font-family: times; font-size: 12pt; color: black; font-weight:normal;} a:link {color: blue;} a:visited {color: yellow;} a:active {color: red;} </style> </head> <body> <h2>This is the headline of my story</h2> <h3> My byline can go here</h3> <p>This is where I put my story in.</p> <p> It's a great story and I can't wait to add multimedia elements to it for a different assignment! </p> <p> I would use the following types of multimedia to make a great online package.

    <li>Photos</li> <li>Video</li> <li>Maybe a map</li> <li>Maybe a survey or poll</li> <li>A cool database</li> The possibilities are endless!</p> <p>My story will probably have a <a href="http://usc.edu">link</a> or an image <img src="images/myphoto.jpg" width="100" height="100" alt="My photo" /> in it as well.</p> </body> </html> UPLOADING YOUR FILES TO THE USC SERVER Once youre sure your index.html file works, youre ready to upload your file to the USC server so it can be accessed by anyone. 1. Open FileZilla . Click on the arrow next to Quickconnect.

    You will see sftp://aludra.usc.edu. Highlight it, and click on it, and the connection process will start. 2. 3. Double-click on public_html, then on jour_503. You'll then be in the jour_503 directory or folder. On the LEFT-hand side, you'll see all of the directories/folders on your PC. Find your index.html file by clicking on the C:\Documents and Settings directory, and then on the directory/folder with your name, and then on My Documents. (Your PC may be set up differently; you might need to click around a bit on your C: drive to find the right My Documents directory/folder.) Highlight your index.html file, then right-click. You'll see "Upload" click on it. Index.html will then be copied and transferred to the jour_503 directory on the USC server. 4. 5. Upload your story page in the same way. If you have any photos, graphics or other images coded on your page, you will need to upload those. On the RIGHT-hand side, double-click on the images folder, and make sure youre in the images folder.

    Find your photo or graphic file on the LEFT-hand side, highlight it, and right-click. Click on "Upload," and the photo file will be copied and transferred to your images directory or folder. 6. Your story home page is now public. Open up a browser and enter your URL (be sure to put your class in the URL:

    http://www-scf.usc.edu/~username/jour309/yourstoryslug.html
    Note: If your page tested correctly when you opened the file locally (using Internet Explorer/Open) but NOT when you uploaded the file to the USC server, go back to WordPad, open the file, and resave it as a Text Document-MS DOS Format file. Upload the resaved file to your server space with FileZilla, and look at it again. Be sure that the uploaded file is the new file, not the old one.

    FURTHER REFERENCES 1. HTMLPrimer http://www.htmlprimer.com/htmlprimer/html-beginners 2. HTML Beginner Tutorial http://www.htmldog.com/guides/htmlbeginner/ 3. HTML/A Beginners Guide (Third Edition), by Wendy Willard, McGrawHill/Osborne, 2007. http://www.amazon.com/HTML-Beginners-Guide-Wendy-Willard/dp/0072263784/ref=sr_1_1? ie=UTF8&s=books&qid=1232413601&sr=8-1

    Vous aimerez peut-être aussi