1 / 35

How to Build a Website

How to Build a Website. What is HTML? How does it work? What are the tags up to? Is this going to take long? Do I have to be online all the time? Is there anything HTML cannot do? What is XHTML ?. What is HTML?.

maxine
Télécharger la présentation

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 What is HTML? How does it work? What are the tags up to? Is this going to take long? Do I have to be online all the time? Is there anything HTML cannot do? What is XHTML ?

  2. What is HTML? HTML (HyperText Markup Language.) is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organization charged with designing and maintaining the language.

  3. How does it work? HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

  4. What are the tags up to? The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: <b>These words will be bold</b>, and these will not. In the example above, the <b> tags were wrapped around some text, and their effect will be that the contained text will be bolded when viewed through an ordinary web browser.

  5. Is this going to take long? Well, it depends on what you want from it. Knowing HTML will take only a few days of reading and learning the codes for what you want. You can have the basics down in an hour. Once you know the tags you can create HTML pages.

  6. Do I have to be online all the time? Not at all. You can code your entire website offline, storing it all on your own computer, and then just transfer all the files onto the web. Then whenever you have new content, you just add that to the existing online version of your site. It’s really quite simple.

  7. Is there anything HTML can’t do? Of course, but since making websites became more popular and needs increased many other supporting languages have been created to allow new stuff to happen, plus HTML is modified every few years to make way for improvements. Cascading Stylesheets are used to control how your pages are presented, and make pages more accessible. Basic special effects and interaction is provided by JavaScript, which adds a lot of power to basic HTML. Most of this advanced stuff is for later down the road, but when using all of these technologies together, you have a lot of power at your disposal.

  8. What is XHTML? XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001. XHTML5 is undergoing development as of September 2009, as part of the HTML5 specification.

  9. Marking Element with Tags The core building block of XHTML is the tag, which marks each element in a document. The tags can be either two-sided or one-sided. The general syntax for a two-sided tag is: <element>content</element> <p>Robert Service High School</p> The general syntax for a one-sided tag is: <element /> <br />

  10. The Structure of an HTML File <html> <head> <title></title> </head> <body> </body> </html>

  11. White Space in HTML In general, a single whitespace character--including newlines--or a sequence of whitespace characters are treated as a single space and leading/trailing whitespace is eliminated. This is known as 'collapsing whitespace'. Therefore the following two paragraphs are treated as if they were identical <p> Now is the time for all good birds to to fly the edge of the world and take a look over the edge </p> <p> Now is the time for all good birds to to fly the edge of the world and take a look over the edge </p>

  12. HTML Document Example • <html> • <body><p>This is my first paragraph</p></body> • </html>

  13. HTML Basic HTML Headings HTML Paragraphs HTML Links HTML Images

  14. HTML Headings HTML headings are defined with the <h1> to <h6> tags. Example <h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>

  15. HTML Paragraphs HTML paragraphs are defined with the <p> tag. Example <p>This is a paragraph</p><p>This is another paragraph</p>

  16. HTML Links HTML links are defined with the <a> tag. Example <a href=“ http://webproject1.50webs.com/index.htm ">This is a link</a>

  17. HTML Images HTML images are defined with the <img> tag. Example <img src="logo.jpg" alt="Chemistry Classes at Robert Service High School" />

  18. HTML Attributes • HTML elements can have attributes • Attributes provide additional information about the element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value" HTML links are defined with the <a> tag. The link address is provided as an attribute: Example <a href="http://multimediaportfolio.50webs.com/">This is a link</a>

  19. HTML Rules (Lines) The <hr /> tag is used to create an horizontal rule (line). Example <p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>

  20. HTML Comments Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: Example <!-- This is a comment -->

  21. HTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: Example <p>This is<br />a para<br />graph with line breaks</p>

  22. HTML Formatting Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags. Text Formatting Tags <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text

  23. The HTML Style Attribute The purpose of the style attribute is: To provide a common way to style all HTML elements. Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly in separate style sheets (CSS files). HTML Style Examples style="background-color:yellow" style="font-size:10px" style="font-family:Times" style="text-align:center"

  24. Style Examples: Background Color <body style="background-color:yellow"> The style attribute defines a style for the <body> element. <html> <body style="background-color:yellow"> <h2>Look: Colored Background!</h2> </body> </html>

  25. Font Family, Color and Size Font Family, Color and Size <p style="font-family:courier new; color:red; font-size:20px"> The style attribute defines a style for the <p> element. <html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:courier new; color:red; font-size:20px;">A paragraph</p> </body> </html>

  26. Text Alignment <h1 style="text-align:center"> The style attribute defines a style for the <h1> element. Example: <html> <body> <h1 style="text-align:center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> </body> </html>

  27. Hyperlinks, Anchors, and Links In web terms, a hyperlink is a reference (an address) to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An anchor is a term used to define a hyperlink destination inside a document. The HTML anchor element <a>, is used to define both hyperlinks and anchors. We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document.

  28. Tables in HTML Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

  29. Tables and the Border Attribute If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute: <table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

  30. Headings in a Table Headings in a table are defined with the <th> tag. <table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

  31. Empty Cells in a Table Table cells with no content are not displayed very well in most browsers. <table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td></td></tr></table>

  32. HTML Lists HTML supports ordered, unordered and definition lists. Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul><li>Coffee</li><li>Milk</li></ul>

  33. Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol><li>Coffee</li><li>Milk</li> </ol> Definition Lists A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term). A definition list starts with a <dl> tag (definition list). Each term starts with a <dt> tag (definition term). Each description starts with a <dd> tag (definition description). <dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>

  34. List Tags • <ol> Defines an ordered list • <ul> Defines an unordered list • <li> Defines a list item • <dl> Defines a definition list • <dt> Defines a term (an item) in a definition list <dd> Defines a description of a term in a definition list

  35. For more information check the website below http://www.w3schools.com/default.asp

More Related