Web Development Basics: HOW TO in HTML
•Download as PPTX, PDF•
2 likes•756 views
Presentation prepared on the basics of web development in HTML.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Web Development Basics: HOW TO in HTML
Similar to Web Development Basics: HOW TO in HTML (20)
Recently uploaded
Recently uploaded (20)
Web Development Basics: HOW TO in HTML
- 1. Conducted by Derville Lowe, MBA, BSc.
- 2. What is HTML? HTML is a language or codes used for describing web pages. HTML stands for Hyper Text Mark-up Language A mark-up language is a set of specifically named tags which are used to describe document or page content. HTML documents contain HTML tags and plain text.
- 3. HTML Tags HTML markup tags are usually called “HTML tags” HTML tags are keywords OR tag names surrounded by angle brackets - e.g. <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags
- 4. Tag Types: START (Opening) TAG and END (Closing) TAG Syntax Start Tag End Tag e.g. <p> your text </p>
- 5. List of Basic Tags 1. <html> : used at the beginning of each HTML document 2. <body> : used after the <html> tag to specify what is displayed on the webpage 3. <!DOCTYPE> : defines a document type (e.g. html, xml, asp.net) 4. <h> : to create a heading in the HTML document (web page) 5. <p> : to create a paragraph in the HTML document 6. <b> : to boldface text 7. <i> : to italicize text 8. <u> : to underline text 9. <a> : defines a hyperlink 10. <!--…--> : defines a comment or non-code text 11. <br> : to give a single line break in the HTML document 12. <button> : defines a clickable button 13. <hr> : defines a horizontal line 14. < img>: causes an image to be displayed on the web page
- 6. Tag Usage in HTML document editing <!DOCTYPE html> is the first line of text used when creating a web page. This declaration helps the browser to display the web page correctly. The text between The text between The text between The text between <html> and </html> describes the web page <body> and </body> is the visible page content <h1> and </h1> is displayed as a heading <p> and </p> is displayed as a paragraph
- 7. HTML Hyperlinks (Links) The HTML “<a> tag” defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another HTML document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> tag element is the href attribute, which indicates the link's destination.
- 8. HTML Hyperlinks (Links) By default, links will appear as follows in all browsers: An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is underlined and red. NOTE: ALL URLs (web addresses) MUST BE IN QUOTATION MARKS. e.g. <a href="http://www.microsoft.com"> Visit Microsoft</a>
- 9. Cascading Style Sheets (CSS) and HTML CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files, however the style attribute is simple and makes editing styles easier and more direct.
- 10. Cascading Style Sheets (CSS) Syntax INLINE CSS using the STYLE attribute CSS Inline styles are declared in the START (Opening) tags Style elements must be in quotation marks. Examples: <body style="background-color:yellow"> (page background color) <h1 style="font-family:verdana"> (specifies display font for the page) <h1 style="text-align:center"> (alignment of page content)
- 11. Inserting an Image in a HTML document In HTML, images are defined with the <img> tag. The <img> tag is empty, meaning it contains attributes only, and has no closing tag. To display an image on a web page, you need to use the src attribute in the <img> tag. SRC stands for "source". The value of the src attribute is the URL (location & name with file extension) of the image you want to display. The name of the image file must be in quotation marks (“image name”) e.g. <img src="audi.jpg">
- 12. HTML Editors 1. 2. 3. 4. 5. 6. 7. Notepad WordPad MS Word Adobe Dreamweaver MS Expression Web MS Visual Web Developer Express Coffee Cup HTML Editor
- 13. Example of Simple Web Page Scripting in HTML TRY IT YOURSELF (image file must be replaced before trying code) <!--Author: Derville Lowe--> <head> <title> HMTHS </title> </head> <!--Specifies text to be displayed in the title bar of the browser--> <html> <body style="background-color:green"; align="center"> <!--Specifies how the web page is displayed using an INLINE CSS--> <img src="audi.jpg"; height=150px; width=200px> <! --Displays a jpeg image on the web page with dimensions (image size) specified--> <hr> <!--Displays a horizontal line on the web page--> <h1>My First Heading</h3> <!--Displays a heading on the web page--> <p><u>My first <br>paragraph.</u></p> <p>My Second paragraph. This is great!</p> <!--Displays an underlined paragraph with a line break--> <!--Displays a paragraph with no formatting--> <a href="http://www.microsoft.com"> Visit Microsoft </a><br> <!--Creates a link to the Microsoft website--> <button><a href="http://www.facebook.com"> Go To Facebook </a></button> <!--Creates a button link to the Facebook website--> </body> </html>
- 14. Web Development Tutorials ONLINE Visit: www.w3schools.com