1 / 16

Getting Started with HTML

Getting Started with HTML. HTML. H yper T ext M arkup L anguage HTML isn’t a program language, its known as a markup language A Markup language has tags around the regular, readable words that tell your computer how to treat them.

brinly
Download Presentation

Getting Started 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. Getting Started with HTML

  2. HTML • Hyper Text Markup Language • HTML isn’t a program language, its known as a markup language • A Markup language has tags around the regular, readable words that tell your computer how to treat them. • Hypertext is a hyperlink, or link, any text that, when clicked, goes to another page is hypertext. • This text is usually blue with an underline, though the style and color can be changed.

  3. HTML Sample Here is a simple example of <b>markup tags</b> in action • HTML Tags are surrounded by angle brackets or “Greater than, less than” signs: < and > • HTML tags usually have an opening tag and a closing tag, the closing tag starting with a slash • Ex: <b> is an opening tag, and </b> is a closing tag • The above example would look something like this on a web browser: Here is a simple example of markup tags in action • You can see that the bold begins at the opening tag, and ends at the closing tag. • Open the file, “text1.html” in Notepad or TextEdit to try it yourself

  4. More Tags • Open “text2.html” and Try these tags and see what they do • <i>, <u>, <h1> • Remember to add the closing tag. • You can even overlap different tags, for example This line has both <b>Bold <u>and</u> Underline</b>! Would look like This line has both Bold and Underline!

  5. Practice Time Open “text3.html” in Notepad or TextEdit, and add HTML tags to make it look like this: The tags we’ve learned so far are <b> <i> <u> and <h1> See if you an figure out the others you’ll need

  6. Something’s not quite right… Dose your webpage look like this? What went wrong? • Let’s compare. The headings seem right, and the various markups all look right, but all the text is lumped together…

  7. Sorry, I did that on purpose… • Look back at your code. Web browsers don’t recognize line breaks. • We have to manually add in the a Linebreak code: 1 <br> 2 <br> 3 Would look like 1 2 3 Note that there is no closing BR tag! Just add <br> anywhere you want a line break.

  8. OK, lets try that again. • Go back to your code and add in the <br> tag to make a line break. Keep testing until it looks like this.

  9. Too much space? • You’ll probably notice that adding a <br> tag after an <h1>, <h2> or <h3> tag seems to add too many line breaks. • Heading tags have a built in line break, so you don’t need to add one there.

  10. Does yours look something like this? This is sample text to test on.<br> <br> Some Basic HTML tags can let you do<br> <b>Bold</b> <i>Italics</i> <u>Underline</u> and <s>Strikethrough</s><br> <br> <b>You can even <u>double up</u> on <i>various <u>tags</u></i></b>, or put them <b><i><u><s>all on at once</s></u></i></b>!<br> <br> There are three heading sizes,<br> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> These are preset sizes for text headings<br> <br> Save this as an HTML document and test in a browser. Does it look like you thought it would? Notice how I add my own line breaks, along with adding the coded line break, <br>. This is just a personal preference, but it helps me keep track of content.

  11. Take a break! Questions? Comments?

  12. It’s not quite that simple… • There are several more tags to fully create an HTML page. • These tags are <head><title> and <body> • These tags help the browser, and automated website readers (screen readers for the blind, Google search robots, etc) understand the content.

  13. The Tags An example of how these are used is on the next slide • <html> - This tag goes around the whole document. • <head> - Web page information that is not displayed normally can go here including the website’s title, scripts, etc. • <title> - This is used to set a website’s title (see next slides for an example) • <body> - all of the main content goes within the body tags

  14. This is a simple, but complete web page <html> <head> <title>This is my website</title> </head> <body> All website content goes here. </body> </html>

  15. And here is how it looks in a browser Notice where the website title is displayed, and where the content is displayed.

  16. Adding these tags to text3.html <html> <head> <title>This is my website</title> </head> <body> This is sample text to test on.<br> <br> Some Basic HTML tags can let you do<br> <b>Bold</b> <i>Italics</i> <u>Underline</u> and <s>Strikethrough</s><br> <br> <b>You can even <u>double up</u> on <i>various <u>tags</u></i></b>, or put them <b><i><u><s>all on at once</s></u></i></b>!<br> <br> There are three heading sizes,<br> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> These are preset sizes for text headings<br> <br> Save this as an HTML document and test in a browser. Does it look like you thought it would? </body> </html>

More Related