Download presentation
Presentation is loading. Please wait.
Published byRosa Benson Modified over 9 years ago
1
Module 5 HTML: An Introduction
2
●A language to describe and create web pages. ●Stands for: Hyper Text Markup Language What is HTML?
3
Just two very basic things and you can start creating your own web pages! 1) A Browser: Google Chrome, Internet Explorer, Mozilla Firefox etc. 2) Text Editor: Notepad, Pico, TextEdit What Do You Need?
4
Elements: HTML document contains several elements which give it structure. Major Elements:...... ;... Tags: Labels used to mark the start and end of an element. Opening Tag: Closing Tag: Elements and Tags
5
HTML is really easy!! Example Opening Tag Attribute C Content Closing Tag Element
6
My First Page Hi! I hope this works…. First Web page!
7
There are 6 possible headings: This is Heading one This is Heading two This is Heading three This is Heading four This is Heading five This is Heading six Heading Tags
9
Paragraph Tag:.... This is a paragraph Another paragraph One more paragraph Font Tag:... This is a random line. Paragraph And Font Tags
11
Bold & Strong: This is bold and strong Italics & Emphasis: This is italics and emphasized Underline: This is underlined Superscript and Subscript: This is in superscript and this is in subscript Formatting Tags
13
URL is the address of a web page. Composed of words(http://www.google.com)or numbers(IP address)(192.68.20.50)http://www.google.com Stands for: Uniform Resource Locator URLs
14
https://www.youtube.com/watch?v=5gkJ_8Fow64 To break it down: scheme://host.domain:port/path/filename Scheme: Defines type of internet service.(http/https/ftp) Host: Domain host (default for http is www) Domain: Internet domain name (youtube.com) Port: Port number at the host (default for http is 80) URL Syntax
15
https://www.youtube.com/watch?v=5gkJ_8Fow64 scheme://host.domain:port/path/filename Path: Path at the server Filename: name of document/resource [1] [1] http://www.w3schools.com/html/html_urlencode.asp
16
HTTP (Hyper Text Transfer Protocol): Not encrypted HTTPS (Secure HyperText Transfer Protocol): Web pages are secure and information exchange is encrypted. FTP (File Transfer Protocol): For downloading and uploading files to a website. File: A file on your computer [1] [1] http://www.w3schools.com/html/html_urlencode.asp URL Schemes
17
Use the... tag External Hyperlinks: Click here to go to Google’s homepage.http://www.google.com/ Hyperlinks
18
Internal Hyperlinks: Helps in creating internal bookmarks. Use id attribute and “#” Visit Useful Tips Section Useful Tips
20
Just use (Open Tag) * can set height and width in pixels or percentage of screen size Image Tag
22
There are three types of lists: Ordered Lists:...,... Unordered Lists:...,... Description Lists:...,...,... Lists
23
Fruits Apples Oranges *Other types: a, A, 1, i, I Ordered Lists
24
Drinks Tea Coffee Coke *Other types: disc, square, circle Unordered Lists
25
Pizzas Cheese, Pepperoni and Veggie Soft Drinks Sprite, Ginger Ale and Pepsi Description Lists
27
GO FROM LEFT TO RIGHT!!! Tags Used:.................... Tables
28
Firstname Lastname Age John Doe 20 Will Smith 16
29
Firstname Lastname Age John Doe 20
30
Will Smith 16
32
Used to pass data to server. Tags used:...... Forms
33
Username Password *default width=20 characters Multiple lines: This box is for longer text like addresses. Text boxes
34
Radio button: Male Female Check Boxes: I will have tea I will have coffee Buttons
36
Car Bicycle Skateboard Public Transit Drop Down List
37
Personal information: Name: Date of birth: Fieldset and Submit
39
CSS (Cascading Style Sheets) is used for styling and giving structure to your webpages. Can be added in 3 ways: Inline: Use style attribute in HTML elements Internal: Use element in section External: Use external CSS file CSS: An Intro
40
Using style attribute: This is a heading CSS Styling
42
Using element: CSS h1 {font-size: 25px; font-family: Comic Sans MS;} p { font-size: 15px; font-family: Impact;} This is a heading This is a paragraph CSS Styling
44
1) I understand CSS...maybe! 2) This is another cartoon! 3) More with CSS
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.