1 / 19

How to make a webpage

Learn how to make a webpage using HTML code. Discover adding text, editing, pictures, and making links. Understand file types and extensions, e.g., txt, gif, jpg. Begin with basic HTML tags in Notepad and browser. Customize text styles, font, size, and colors. Organize content with headings, align them, add images, and include hyperlinks. Follow step-by-step instructions to create your very own web page from scratch.

apridgen
Download Presentation

How to make a webpage

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 make a webpage HTML code Adding Text Editing text Adding pictures Making links

  2. First though – some files

  3. File extensions • .txt • .gif .jpg .bmp • .mpg .avi .wmv • .doc .pdf .ppt .xls • .exe • .wav .mp3 • .html or .htm

  4. A web page is nothing more than a file, a HTML file to be exact. It's called HTML because web page documents have the file extension .html or .htm. • Hyper • Text • Mark-up • Language

  5. What we need: • Notepad • Browser

  6. Open notepad • <html> • </html>

  7. Now add the head tags • <html> • <head> • </head> • </html>

  8. In the head tags we need a title • <html> • <head> • <title></title> • </head> • </html>

  9. Next the body tags • <html> • <head> • <title></title> • </head> • <body> • </body> • </html>

  10. Add content • <title>My first web page!</title> • <body>Hello Everybody!</body>

  11. Lets change the colour • <body bgcolor="#ccffcc">

  12. Make text bold, italics, underline <body>Something really <b>cool</b></body> • <body>Something <i>really</i> <b>cool</b></body> • <body><u>Something</u> <i>really</i> <b>cool</b></body>

  13. Change the font size, colour • <body>Something really <font size="6">cool</font></body> • <body>Something really <font color="#ff0000">cool</font></body>

  14. Section headings • <h1>Something really cool</h1> • <h2>Something really cool</h2> • <h3>Something really cool</h3> • <h4>Something really cool</h4> • <h5>Something really cool</h5> • <h6>Something really cool</h6>

  15. Align headings • <h2 align="left">Something really cool</h2> • <h2 align="center">Something really cool</h2> • <h2 align="right">Something really cool</h2>

  16. Skip a line • <br>

  17. Add an image <body> <imgsrc=”name.extension” > </body> <body><imgsrc=”name.ext" width="130" height="101"></body>

  18. Let’s add a link: • <body>Go to Yahoo!</body> • Add anchor tabs: • <body> • Go to <a>Yahoo!</a> • </body>

  19. To finish: • <body> • Go to • <a href="http://www.yahoo.com/">Yahoo!</a> • </body>

More Related