21
Introduction to HTML Introduction to HTML
| Date post: | 16-Jan-2016 |
| Category: |
Documents |
| Upload: | morris-king |
| View: | 221 times |
| Download: | 0 times |
Introduction to HTMLIntroduction to HTML
What is a HTML File?What is a HTML File?
HTML stands for Hyper Text Markup HTML stands for Hyper Text Markup LanguageLanguage
An HTML file is a An HTML file is a text filetext file containing small containing small markup tagsmarkup tags
The tags tell the built in function in the web The tags tell the built in function in the web browser how to structure the text. For browser how to structure the text. For instance put text in a bold font.instance put text in a bold font.
What is a HTML File?What is a HTML File?
The markup tags tell the Web browser how The markup tags tell the Web browser how to display the pageto display the page
An HTML file must have an htm or html file An HTML file must have an htm or html file extensionextension
An HTML file can be created using a simple An HTML file can be created using a simple text editortext editor
When you learn a language, you When you learn a language, you need to learn rules, called need to learn rules, called syntaxsyntax
Elements to define the structure of the Elements to define the structure of the documentdocument
Examples of elements are:Examples of elements are:
head, body, p, ulhead, body, p, ul
When you insert these elements in your text When you insert these elements in your text you surround them with < (less than) and > you surround them with < (less than) and > (greater than) symbols.(greater than) symbols.You now have <head>, <body>, <p> and You now have <head>, <body>, <p> and <ul>.<ul>.These are no longer elements; they are now These are no longer elements; they are now called called tagstags..
Type in the following text in a simple Type in the following text in a simple text editor: text editor:
<html><html><head> <head> <title>Title of page</title> <title>Title of page</title> </head> </head> <body> This is my first homepage. <body> This is my first homepage.
<b>This text is bold</b> <b>This text is bold</b> </body> </body> </html> </html>
Example ExplainedExample Explained
The first tag in your HTML document is The first tag in your HTML document is <html>. This tag tells your browser that this <html>. This tag tells your browser that this is the start of an HTML document. The last is the start of an HTML document. The last tag in your document is </html>. This tag tag in your document is </html>. This tag tells your browser that this is the end of the tells your browser that this is the end of the HTML document. HTML document.
The text between the <head> tag and the </head> The text between the <head> tag and the </head> tag is header information. Header information is tag is header information. Header information is not displayed in the browser window.not displayed in the browser window.
The text between the <title> tags is the title of The text between the <title> tags is the title of your document. The title is displayed in your your document. The title is displayed in your browser's caption.browser's caption.
The text between the <body> tags is the text that The text between the <body> tags is the text that will be displayed in your browser.will be displayed in your browser.
The text between the <b> and </b> tags will be The text between the <b> and </b> tags will be displayed in a bold font.displayed in a bold font.
Save the file as "mypage.html". Save the file as "mypage.html". Start your Internet browser. Select "Open" (or Start your Internet browser. Select "Open" (or
"Open Page") in the File menu of your browser. "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click created - "mypage.htm" - select it and click "Open". Now you should see an address in the "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\dialog box, for example "C:\MyDocuments\mypage.html". Click OK, and the browser will mypage.html". Click OK, and the browser will display the page.display the page.
Or write the path in the address window. E.g.Or write the path in the address window. E.g.C:\ MyDocuments\mypage.html. C:\ MyDocuments\mypage.html.
Or double-click on iconOr double-click on icon
HTML TagsHTML Tags
HTML tags are used to mark-up HTML HTML tags are used to mark-up HTML elementselements HTML tags are surrounded by the HTML tags are surrounded by the two characters < and >two characters < and > The surrounding characters are called The surrounding characters are called angle bracketsangle brackets HTML tags normally HTML tags normally come in pairscome in pairs like <b> and </b> like <b> and </b> The first tag in a pair is the The first tag in a pair is the start tag,start tag, the second tag is the the second tag is the
end tagend tag The text between the start and end tags is the The text between the start and end tags is the element element
contentcontent HTML tags are HTML tags are not case sensitive,not case sensitive, <b> means the same <b> means the same
as <B> as <B>
This is an HTML element: This is an HTML element:
The HTML element starts with a The HTML element starts with a start tagstart tag: <b>: <b>The The contentcontent of the HTML element is: This text is bold. The of the HTML element is: This text is bold. The HTML element ends with an HTML element ends with an end tagend tag: </b>: </b>
The purpose of the <b> tag is to define an HTML element The purpose of the <b> tag is to define an HTML element that should be displayed as bold.that should be displayed as bold.
<b>This text is bold</b>
Comments in HTMLComments in HTML
The comment tag is used to insert a comment in The comment tag is used to insert a comment in the HTML source code. A comment will be the HTML source code. A comment will be ignored by the browser. You can use comments ignored by the browser. You can use comments to explain your code, which can help you when to explain your code, which can help you when you edit the source code at a later date. you edit the source code at a later date.
Note that you need an exclamation point after Note that you need an exclamation point after the opening bracket, but not before the closing the opening bracket, but not before the closing bracket. bracket.
<!-- This is a comment -->
Basic HTML TagsBasic HTML Tags
Tag DescriptionTag Description <html> Defines an HTML document <html> Defines an HTML document <body> Defines the document's body<body> Defines the document's body <h1> to <h6> Defines header 1 to header 6<h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph<p> Defines a paragraph <br> Inserts a single line break<br> Inserts a single line break <hr> Defines a horizontal rule<hr> Defines a horizontal rule <!--> Defines a comment<!--> Defines a comment
Adding images with the IMG elementAdding images with the IMG element
Use the IMG element to add an image to your page Use the IMG element to add an image to your page simply. The IMG element includes everything you simply. The IMG element includes everything you need in the start tag and does not have end tags.need in the start tag and does not have end tags.
<IMG src=“images/seeds.jpg” alt=“picture of seeds” <IMG src=“images/seeds.jpg” alt=“picture of seeds” height=“100” width=“100”>height=“100” width=“100”>
src: URL of imagesrc: URL of imageAlt: short descriptionAlt: short descriptionHeight, width: height and width of imageHeight, width: height and width of image
To publish a website on the To publish a website on the internet – if you want it to be seen internet – if you want it to be seen
by othersby others If you have a internet service provider you often If you have a internet service provider you often
have a space on their web server to publish your have a space on their web server to publish your sitessites
To transfer your files to a web hotel you need a To transfer your files to a web hotel you need a FTP-program (file transfer protocol)FTP-program (file transfer protocol)
You often need hostname, user Id, passwordYou often need hostname, user Id, password Call the first page (start page) index.html. The Call the first page (start page) index.html. The
web server is then automatically sending this site web server is then automatically sending this site when someone is asking for the url-address.when someone is asking for the url-address.
How to retrieve a web pageHow to retrieve a web page
client
The web server finds the document and sends it back to the client computer.The web server finds the document and sends it back to the client computer.
Web server
Ask for certain address
More to read about HTML on the internetMore to read about HTML on the internet Links to tutorial from your web siteLinks to tutorial from your web site
![1 Hyper Text Markup Language (HTML) UNIT- 02 Hyper Text Markup Language (HTML) UNIT-02/LECTURE-01 Introduction to Hyper Text Markup Language (HTML) About HTML: [RGPV/Dec 2013(4)] So](https://static.documents.pub/doc/80x56/5aae4bc17f8b9a25088c15fa/1-hyper-text-markup-language-html-unit-02-hyper-text-markup-language-html-unit-02lecture-01.jpg)
