1 / 22

How to build a website

How to build a website. By Donna Naumann. On your desktop make a folder called, “My Website”. In this folder make 2 more folders Name one folder: html And the second folder: images Everything must be in this main “My Website” folder. Make a new folder.

eagan
Download Presentation

How to build a website

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How to build a website By Donna Naumann

  2. On your desktop make a folder called, “My Website”. • In this folder make 2 more folders • Name one folder: html • And the second folder: images • Everything must be in this main “My Website” folder Make a new folder

  3. You can use Notepad++ or Dreamweaver • Notepad is part of the Window operating system that comes with most PC computers. • *Save all of you documents with the .html extension in your html folder, save your images with a .jpg, .gif, or .png extension and place in your image folder Basic text editor

  4. <html> • This is the Start tag or open tag, you must use this at the beginning of the document • </html> • This is the closing tag, you must use a closing tag at the end of your html document • An HTML "tag" is an instruction that makes a given section of your page look a certain way without being visible itself. A tag consists of a less than sign (<) to begin the tag, followed by a tag name, or instruction, followed by a greater than sign (>) to end the tag. Remember: tags are not case sensitive, so <P> is the same as <p>. Building a website with basic HTML(HyperText Markup Language)

  5. <html> • The title tag goes between the head tags • <head><title>How to build a simple web page</title></head> • This appears on the browser title bar • ALL OF YOUR JAVASCRIPT, MEGA TAGS, STYLE SCRIPT GOES IN THE • HEAD TAG • <body></body> • </html> Title tags

  6. <html> • <title>How to build a simple web page</title> • <body>Everything you want people to see appears between the body tags. • Use F5 to refresh your browser every time you add more information, if using Notepad or save if using Dreamweaver. • </body> • </html> The body tags

  7. <html> • <head><title>How to build a simple web page</title></head> • <body> • <h1>Welcome to my Website</h1> • </body> • </html> Document header

  8. <p></p> • These are opening and closing paragraph tags, write your text in-between these tags. • <p>Let me tell you about myself</p> Paragraph tags

  9. <html></html> Indicates the start and end of the html document. • <head></header> Document title or header. • <title></title> Seen in the web browser, goes between the header tags. • <meta/> Indicates hidden information about the web page. • <body></body> Everything that people will see goes between these tags. • <h1></h1>h1 thru h6 indicates a heading with a certain size. • <li>/<li> Indicates that the item that follows the tag is an item within a list. • <ul> </ul>= The start and end unordered list, used for bullets • <ol> </ol> = ordered list, used for numbers or letters • <p> </p> = The start and end of a new paragraph. • <bold></bold>= The start and end of bold text. • <br> </br> = Inserts a break at the point where the tag appears. • <hr> </hr> = Inserts a horizontal rule, used to put a line across a page. Tag descriptions

  10. <ul> • I love dogs and can help you with the following: • <li>Potty-training a new puppy</li><li>Getting your dog to stop barking</li><li>Choosing the appropriate breed of dog for your lifestyle</li></ul> Unordered or Bullet Lists

  11. <ol> • I love dogs and can help you with the following: • <li>Potty-training a new puppy</li><li>Getting your dog to stop barking</li><li>Choosing the appropriate breed of dog for your lifestyle</li></ol> Number Lists

  12. HTML links are defined with the <a> tag. This is a link • <html> • <body> • <a href="http://www.highline.edu/home/"> • This is a link</a> • </body> • </html> HTML Links

  13. <html> • <body> • <p style="background-color:#FFFF00"> • Color set by using hex value • </p> • <p style="background-color:rgb(255,255,0)"> • Color set by using rgb value • </p> • <p style="background-color:yellow"> • Color set by using color name • </p> • </body> • </html> Adding Color to your backgroundColors are displayed combining RED, GREEN, and BLUE light.

  14. http://www.december.com/html/spec/colorhex.html • Or just type in the name in Dreamweaver Hexadecimal Color code

  15. In HTML 4.0, all formatting can be removed from the HTML document, and stored in a style sheet. • Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. • The CSS specifications are maintained by the World Wide Web Consortium (W3C). HTML Styles using CSSCascading Style Sheets

  16. <html> • <body> • <h2>Norwegian Mountain Trip</h2> • <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> • </body> • </html> HTML adding images

  17. <html> • <body> • <p> • <font size="5" face="arial" color="red"> • This paragraph is in Arial, size 5, and in red text color. • </font> • </p> • <p> • <font size="3" face="verdana" color="blue"> • This paragraph is in Verdana, size 3, and in blue text color. • </font> • </p> • <p>The font element is deprecated in HTML 4. Use CSS instead!</p> • </body> • </html> HTML Fonts

  18. Dreamweaver, like other HTML editors, edits files locally then uploads them to the remote web server using FTP, SFTP, or WebDAV. • After opening Dreamweaver choose the html in create new • You should first create a folder on your desk top with 3 other folders inside: • Label the main folder website • Label the folders: html, images, and • Select split in the top bar to see your html code and select live view from the top menu. • In Photoshop create your index (home)page and resume page and save it at 72 resolution. The image size should be _______. SAVE PICTURES TO YOUR IMAGE FOLDER YOU CREATED ON DESKTOP! You want all of your links to stay together. Adobe Dreamweaver

  19. In Dreamweaver choose file import XML into template. You can change your background colors here at the bottom of the page under page properties. You can also copy and paste buttons from illustrator if you want to link them to another page. You tube is also very helpful if you need someone to walk you through it step by step. • http://www.youtube.com/watch?v=d2wEwFwfVek • Choose CSS button on the bottom. Create a hotspot in Dreamweaver

  20. Click on the image area you want to add a map to. • Below is a map option: circle, rectangle, polygon. • Select area and add a link. You could choose the usa map and add the wa.gov website. Whenever someone clicks on the image it would take them to that website! HOTSPOT IN DREAMWEAVER

  21. You tube is a good resource for help, it has many tutorial. Below are some I thought you might find useful. • http://www.youtube.com/watch?v=GwQMnpUsj8I&feature=related • http://www.w3schools.com/css/css_padding.asp Other helpful resources

  22. To view your web page, you must open the "index.html" file inside of a web browser. Open up another browser window and then follow these instruction. • In the new browser window, select File then Open • Then click Browse to enter Windows Explorer • Do you remember where you file is? Good, then navigate to its location • When you find your file, index.html, double-click the file to open it inside your web browser • Success! You have just viewed your very first webpage. If this did not work for you, please go through the steps again and follow the directions closely. VIEW YOUR WEBSITE IN A BROWSER

More Related