1 / 19

How to create a static website with HTML

Learn how to create simple, static websites using HTML. No special software needed. Start with a text editor, like Notepad, to write and edit HTML files. Understand HTML basics, tags, elements, headings, paragraphs, line breaks, and horizontal lines. Create your first web page, save it as ".html," and open it in a web browser. Follow the essential rules and practices of HTML coding for building a strong foundation. Get hands-on experience with HTML tags and formatting to design your web pages effectively.

wagstaff
Download Presentation

How to create a static website with HTML

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 create a static website with HTML For creating simple, static websites, there is no need of any special software. Although there are several programs like Visual Web Developer, Dream weaver, FrontPage, etc. available for generating HTML codes; I strongly recommend that you start with notepad for writing and editing HTML files. Alternatively, you may use any other text editor of your choice. WEB PAGE MAKER

  2. How to create a static website with HTML HTML Basics HTML – Hyper Text Markup Language (Not a programming language, but a mark-up language) for creating web pages. HTML is just a simple text file which is read by web browsers (like Internet Explorer and Google Chrome) and displayed as web page. With HTML, you can create your own website.

  3. How to create a static website with HTML

  4. How to create a static website with HTML Save the text file as ‘myfirstwebpage.html’ or ‘myfirstwebpage.htm’ in html folder. Remember to change the extension as ‘.html’ or ‘.htm’ in place of default ‘.txt’ or your html code will not work! Now go to ‘html’ folder where you have just saved your web page and double click to open it. Wow! You have just created your first web page. Congratulations…!

  5. How to create a static website with HTML In the example above, <html>, <head>, <title> and <body> are all HTML tags. HTML tags are code words surrounded by angle brackets. Tags are used by web browsers to mark-up the web pages. There are many types of tags nested in HTML document, each having different meanings. Most of these tags come in pair – starting tag and end tag. End tag is different from starting tag by a forward slash “/”. Web pages are made of a series of elements. Elements consist of start tag, end tag and some content in between. In the example, “<title>My First Web Page</title>” is an element.

  6. How to create a static website with HTML As of now, treat <html> tag as the starting and end tag of any HTML document. The html codes between <html> and </html> makes the web page. All other tags come in between these parent tags. <title> tag describes the web page title. The content between these tags appear at the title bar of the page. Putting right and appropriate title for your web page is very important. Search engines like ‘Google’ and ‘Bing’ give a lot of importance to the title of the page in their search results. Make sure to put an appropriate title to all of your web pages.

  7. How to create a static website with HTML • Notes • Starting tags must be accompanied with respective end tags. It is a good idea to write starting tag and end tag first and then add content in between. • HTML tags are not case-sensitive. It means browser will equally treat <html> and <HTML>. However, the correct practice is to always use lower-cases for html codes. • Well….it was a lot of theory. However, these are the basics and must be understood clearly for building strong foundation. • Repeat from top, if you are not comfortable before moving ahead!

  8. How to create a static website with HTML HTML Headings Headings are defined with <h1> to <h6> tags, ‘h1’ being the most important and prominent. The size of the text between these tags reduces with ‘h2’, ‘h3’ and so on. By default, headings are displayed in bold text. <h1>         This is 'h1' heading</h1> <h2>         This is 'h2' heading</h2>     <h3>         This is 'h3' heading</h3> . . . . . . . .

  9. How to create a static website with HTML HTML Paragraphs Both html headings and html paragraphs are put in between <body> tags. These are used to publish your written contents.HTML paragraph is defined with <p> and </p> tags. <body>     <h1>         This is heading</h1>   <p>         Here is the paragraph for this heading.         Headings and paragraphs are the basic elements         of any html document. </p>

  10. How to create a static website with HTML HTML line break - <br /> tag To introduce a line break, use <br /> tag. You may use two or more <br /> tags for more spacing between the lines.  <p>      Here is the paragraph for this heading.<br />      Headings and paragraphs are the basic elements of any html document. </p>

  11. How to create a static website with HTML HTML – Horizontal Lines <hr /> is used to introduce a horizontal line inside the page. Its primary use is to separate two contents. Like <br /> tag, <hr /> also does not come in pair. Use of ‘hr’ tags at appropriate place makes your web page more readable and professional!  <p>      Here is the paragraph for this heading.<hr/>      Headings and paragraphs are the basic elements of any html document. </p>

  12. How to create a static website with HTML Viewing HTML Source Code We now know that the websites are made in HTML. So, how do you see the HTML source code of any web page? It’s really simple. Just right click on the web page you are currently viewing and select ‘view source’ or ‘view page source’ or anything similar. If you see the HTML source codes of large web pages, it may seem to be little complicated and confusing. But don’t worry; as you progress you will start understanding it easily.

  13. How to create a static website with HTML HTML – Formatting - What are HTML Attributes? Attributes are associated with tags (and elements) and provide extra information to the browsers. These appear in HTML documents like this:  <tag attribute=”value”>Some Content</tag>.  <h1>This is normal heading</h1>    <h1 style="font-size:10px; color:#ff0000">         This is heading with attribute.</h1>    <p style="background-color:#ffffcc">      As you see, the background of the paragraph has changed.      You can do a lot more with style attribute.    </p>

  14. How to create a static website with HTML HTML – Text Formatting <b> and </b> bold. <i> and </i> italic. <sub> and </sub> subscripted text. <sup> and </sup> superscripted text. <b>This is bold. </b> <i>This is in italic style. </i> This text contains <sub>subscript</sub> text. This text contains <sup>superscript</sup>text.

  15. How to create a static website with HTML • HTML Lists • This is ordered list: • List Item • List Item • List Item • And this is unordered list: • Unordered List Item • Unordered List Item • Unordered List Item <ol>   <li>List Item</li>   <li>List Item</li>   <li>List Item</li> </ol> <ul> <li>Unordered List Item</li> <li>Unordered List Item</li> <li>Unordered List Item</li> </ul>

  16. How to create a static website with HTML HTML Images We use <img> tag to place image in HTML document. Minimum html code for html image: <imgsrc=“mypic.jpg"/> With attribute : <imgsrc=" http://www.ducic.ac.in/assets/images/logo-long.png " alt=“CIC Logo“ title =“ Cic Logo” height="60" width="60" />

  17. How to create a static website with HTML • HTML Images • Use ‘JPEG’ format for the photographs while displaying html image. Compressing the JPEG image will slightly distort it. • ‘GIF’ has the limitation of 256 colors only. However, it maintains the original colors. Use ‘GIFs’ for clip-arts, buttons, etc. • ‘PNG’ is best suited for icons, banners and diagrams as it retains the transparency also. It is getting more and more popular as standard html image.

  18. How to create a static website with HTML HTML Links So far, we were focused just to make stand alone web pages. It’s time now to link these with each other with html links. You will find html links in all web pages. HTML links have a great role to make internet so successful. Remember ‘hyper-text’ of HTML. HTML links are defined with <a> and </a>tags (anchor tags). <ahref="http://www.ducic.ac.in/ ">Go to CIC Website</a> <ahref="links.html"> Go to HTML Links</a>

  19. NEXT Tables & Forms Design…How to create a Dynamicwebsite ? Rajneesh Talwar – 999-999-3560 ````````````````````````````

More Related