Presentation is loading. Please wait.

Presentation is loading. Please wait.

Module 5 HTML: An Introduction. ●A language to describe and create web pages. ●Stands for: Hyper Text Markup Language What is HTML?

Similar presentations


Presentation on theme: "Module 5 HTML: An Introduction. ●A language to describe and create web pages. ●Stands for: Hyper Text Markup Language What is HTML?"— Presentation transcript:

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

8

9 Paragraph Tag:.... This is a paragraph Another paragraph One more paragraph Font Tag:... This is a random line. Paragraph And Font Tags

10

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

12

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

19

20 Just use (Open Tag) * can set height and width in pixels or percentage of screen size Image Tag

21

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

26

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

31

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

35

36 Car Bicycle Skateboard Public Transit Drop Down List

37 Personal information: Name: Date of birth: Fieldset and Submit

38

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

41

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

43

44 1) I understand CSS...maybe! 2) This is another cartoon! 3) More with CSS

45


Download ppt "Module 5 HTML: An Introduction. ●A language to describe and create web pages. ●Stands for: Hyper Text Markup Language What is HTML?"

Similar presentations


Ads by Google