More Related Content
What's hot
What's hot (20)
Similar to HTML Coding
Similar to HTML Coding (20)
More from selcukca84
More from selcukca84 (20)
Recently uploaded
Recently uploaded (20)
HTML Coding
- 1. HTML Coding
- 2. Basic Tags • You can create HTML files using the Notepad program. • Start the Notepad program • Type the given text • Create a new folder and type a name, quotes • Save the file in the quotes folder giving a name with the extension .html, default.html • Open this file in your Web browser by selecting File>Open and specifying its location
- 3. Basic Tags
- 4. Code Tags <html>....</html> These tags tell your browser the start and finish of an HTML document. <head>....</head> The header information is written. The tags such as <link>, <meta>, <script>, <style>, <title> and <base> can be used inside the head tags. <body>....</body> The text that will be displayed in your browser <title>....</title> The title that will be displayed in your browser's caption
- 5. Text Formatting <h1>...<h6> Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading. <p>...</p> Paragraphs are defined with the <p> tag. HTML automatically adds an extra blank line before and after a paragraph. You can align a paragraph to the left, center or right using the following format: <p align= "left"> , <p align= "center"> , <p align= "right"> <br> Line Break: The <br> tag is used when you want to end a line. It has no closing tag. <center>…</center> It centers the text. <b>...</b>,<i>...</i>,<u>...</u> It defines bold, italic and, underline text sequentially
- 6. HTML code with text formatting tags
- 7. Preview – Text formatting tabs
- 8. Text formatting • If you want to change font, font size, and font color, you can use <Font> tag: <font face="…" size="…" color="…">text</font> • The size attribute can be set as an absolute value from 1 to 7 or as a relative value using the "+" or "-" sign. Normal text is size 3. • Add font tag to the sentence. <font face="arial" size="4" color="crimson"> <p> <b> Imagination </b> is more important than <u> knowledge </u> </font>
- 9. Horizontal Line • A horizontal line is a great way to separate your Web page into different sections and add visual borders. • The basic syntax for a horizontal line: <hr> • Add a horizontal line after the Heading <center><h1>Famous Quotes</h1></center> <hr>
- 10. Background • The <body> tag has two attributes bgcolor and background that modify the background. The background can be a color or an image. • The bgcolor attribute specifies a background color for an HTML page. • Change the <body> tag as follows: <body bgcolor="lightyellow">
- 11. Background • You may want to choose a background picture instead of plain color. • Just change the code as follows. <body background= "back.gif"> The browser window will be tiled with the background picture. The background picture and the html file must be in the same folder; otherwise the path to the picture must be specified.
- 12. Images • Images are defined with the <img> tag. The syntax of adding an image: <img src="..." width="x" height="y" alt="…" border=x> • The src attribute names the image file. • The width and height attributes specify the dimensions of the picture and help to speed the display of your Web page. • The alt attribute is used to define an "alternate text" that will be displayed either when the browser can not load images or when you hold your mouse a little on the picture. • The border attribute is used to change the border size by typing a number value. Do not use large image files to avoid long delays while the image is downloaded.
- 13. Images • Add a picture after the horizontal line by specifying height, alt and border attributes. <img src="imagine.jpg" height="150" alt="Imagination is more important than knowledge“ border="2">
- 14. Links • The <a> (anchor) tag is used to create a link to another document such as a Web page, a picture, a music file etc. The syntax of creating a link: <a href="URL" target="…">Text to be displayed as a hyperlink</a> • The href attribute is used to address the document to link to. • URL can be a Web address, a page inside the site, a picture, a file or an email address. • The target attribute can define where the linked document will be opened. When you use it with "_blank" value, the document will be opened in a new browser window. • A hyperlink is usually blue and underlined.
- 15. Links • Create a hyperlink to a picture with target attribute. <a href="einstein.jpg" target="_blank"><i>Albert Einstein</i></a> When you click the hyperlink Albert Einstein, the picture einstein.jpg will be opened in a new window.