INTRODUCTION CODING - THE HTML AND CSS.pptx

IvanPhilipMuez 43 views 77 slides Sep 16, 2024
Slide 1
Slide 1 of 77
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50
Slide 51
51
Slide 52
52
Slide 53
53
Slide 54
54
Slide 55
55
Slide 56
56
Slide 57
57
Slide 58
58
Slide 59
59
Slide 60
60
Slide 61
61
Slide 62
62
Slide 63
63
Slide 64
64
Slide 65
65
Slide 66
66
Slide 67
67
Slide 68
68
Slide 69
69
Slide 70
70
Slide 71
71
Slide 72
72
Slide 73
73
Slide 74
74
Slide 75
75
Slide 76
76
Slide 77
77

About This Presentation

This presentation shows the basics of HTML and CSS coding. The rules in coding are included in the presentation. Ensure you read it until the end as it will instantly improve your coding skills. HTML tags are in the presentation's content and how it should be coded.


Slide Content

HTML and CSS Introduction to Coding

Objectives: Understand what HTML and CSS. Become familiar with the different basic tags used in HTML and CSS. Know how to add content to the webpage and customize it.

MOTIVATION: BRAIN TEASER WHAT IS THIS? Jack Answer is BLACKJACK

MOTIVATION: BRAIN TEASER WHAT IS THIS? MILL1ON Answer is One in a Million

MOTIVATION: BRAIN TEASER WHAT IS THIS? over Answer is Leftovers over

MOTIVATION: BRAIN TEASER WHAT IS THIS? SECRET Answer is Top secret

MOTIVATION: BRAIN TEASER WHAT IS THIS? GET IT Answer is Forget It GET IT GET IT GET IT

What is Coding? - Coding , sometimes called “computer programming”, is  how we communicate with computers .

HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets)

CONTAINER AND EMPTY TAGS Container tag always comes with content. Also require a starting as well as an ending tag. <>(content)</> Empty tag require just a starting tag and not an ending tag. <> <p></p> <head></head> < img > < br > < hr >

HTML (Hyper Text Markup Language) HTML is the standard markup language used to create a webpage. - Used to create the actual content of the webpage. The preferred markup language for documents intended to be viewed in a web browser is HTML or Hyper Text Markup Language.

HTML TAGS specifies the character encoding for the HTML document. To set the primary language for a document  HTML attribute that defines the character encoding for your browser to use when displaying the website content HTML tags are the keywords on a web page that define how your web browser must format and display your web page.

BASIC HTML TAGS specifies the character encoding for the HTML document. To set the primary language for a document  HTML attribute that defines the character encoding for your browser to use when displaying the website content Head Tag The head tag <head> contains all the elements describing the document.  Title Tag The title tag <title> specifies the HTML page title, shown in the browser’s title bar.  Body Tag The body tag <body> is where you insert your web page’s content.  Paragraph Tag A paragraph tag <p> defines a paragraph on a web page. Heading Tag  The HTML heading tag defines the heading of the HTML document. The <h1> tag defines the most important tag, and <h6> defines the least.

BASIC HTML TAGS specifies the character encoding for the HTML document. To set the primary language for a document  HTML attribute that defines the character encoding for your browser to use when displaying the website content

FORMATING TAGS  HTML attribute that defines the character encoding for your browser to use when displaying the website content

FORMATING TAGS Emphasis tag The HTML < em > tag is used to emphasize the particular text in a paragraph.  Bold Tag The <b> tag is used to make the text bold. Italic Tag The < i > tag is used to make the text italic. Underline Tag The <u> tag is used to set the text underline.

FORMATING TAGS

LINK TAGS The <a> tag links one page to another page. The href attribute is used to define.

LINK TAGS

LINK TAGS

LIST TAGS The <li> tag is used to enter the contents in the listed order. There are two types of lists : Ordered list < ol > and Unordered list < ul >

LIST TAGS The <li> tag is used to enter the contents in the listed order. There are two types of lists : Ordered list < ol > and Unordered list < ul >

LIST TAGS

Image Tag The < img > tag is used to embed an image in an HTML document. You need to specify the source of the image inside the tag.

Image Tag

The Table Tag The <table> tag is used to create a table in the HTML document. The table row (<tr>) tag is used to make the rows in the table, and the table data (<td>) tag is used to enter the data in the table. The style (<style>) tag is used to add methods to the content by typing the code in the HTML file itself.

The Table Tag

HTML 5 STANDARD STRUCTURE specifies the character encoding for the HTML document. To set the primary language for a document  HTML attribute that defines the character encoding for your browser to use when displaying the website content

Headings and Paragraphs in HTML5 Headings in HTML5 Denoted by the  <h>  tag, HTML 5 uses six levels of headings, from h1 to h6 . In this regard, the first level heading <h1> is the largest whereas the last level heading <h6> is the smallest.

Headings and Paragraphs in HTML5 Paragraphs in HTML5 You have to use  <p></p>  opening and closing tags in order to group your content in paragraphs because web browsers do not recognize hard return inside HTML5 editors. It is very simple to create a paragraph in HTML5. You have to put an opening <p> tag inside the body, write some text and close the paragraph with a </p> tag.

Adding images to HTML5 Use image < img > , an empty element, to determine where your images will go on the website. Also, remember that < img > is a self-closing element and does not require separate opening and closing tags.

Adding images to HTML5 The use of src and alt attribute.  The src attribute is required, and contains the path to the image you want to embed. The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility.

Exercise 1 Directions:  Create a basic HTML 5 page and title it Seatwork 1. Add <h1> heading containing your section and a paragraph answering “what did you learn about the lesson?” Write the code in your ½ crosswise.

CSS (Cascading Style Sheets) CSS is used to format the layout of a webpage. With CSS, you can control the color, font, size of text, and spacing between elements.

CSS can be added to HTML documents in 3 different ways Inline – by using the style attribute inside HTML elements. Internal – by using a <style> element in the <head> section. External – by using a <link> element to link to an external CSS file.

Inline CSS

Inline CSS

Internal CSS

Internal CSS

External CSS

External CSS

External CSS

Additional

<link rel >, type, href in CSS The <link> tag defines the relationship between the current document and an external resource. The rel attribute specifies the relationship between the current document and the linked document. The type attribute specifies the media type of the linked account. The href attribute specified the location of the linked account.

CSS Colors CSS Colors:  In CSS, you can use color values to specify a color i.e., these can be used to provide color either at the foreground of an element which is text or for the background of the element. These can also use to color the borders and decoration effects. Color values in CSS can specify in multiple formats.

Font Family Font family is used to indicating the type of font used in the text. A declaration is required to select Arial font for text font-family: Arial; Similarly, to select Tahoma font, declare font-family: Tahoma. Many times the text is supplemented by multiple font declarations such as font-family: Verdana, Geneva, Tahoma.

Font Size Font size is used to indicate the size and size of fonts used in text. To select 25px fonts for texts, declare font-size: 25px; Similarly, to select 20px fonts, declare font-size: 20px; The size or size of fonts used in text can be given as a percentage, not in pixels or in px, in this case the declaration should be like font-size: 100%.

<html> <head> <title> www.tutorials.freshersnow.com</title> <style> body { background : # 090;} p { font-size : 25px;} h3 { font-size : 20px;} </style> </head> <body> <p> The font size of the text is 25px. </ p> <h3> The font size of the text is 20px. </h3> </body> </html>

CSS Text Alignment Text alignment is used to sort text on web pages. To keep the text on the left side of the page, Declaration must be text-align: left; Similarly to be placed on the right side, Declaration must be text-align: right; Declaration to be placed in the middle of the text-align: center; If you want to sort every line of text in the same shape, then you should declare text-align: justify.

<html> <head> <title>www.tutorials.freshersnow.com </title> <style> body { background : # 090} #right { text-align : right;} #left { text-align : left;} #center {text- align : center} #justify { text-align : justify;} </style> </head> <body> <h2> Example of right align </h2> <p id = "right"> The tutorials.freshersnow is one of the best tutorial website. <p> <h2> Example of left align </h2> <p id ="left"> The tutorials.freshersnow is the best tutorial website.</p> <h2> Example of center align </h2> <p id ="center"> The tutorials.freshersnow < br />is one of the best tutorial website. < br /> </p> <h2> Example of justify align </h2> <p id ="justify"> The tutorials.freshersnow is one of the best tutorial website. </p> </body> </html>

CSS Background image With a CSS background image , one can set a background image by simply using a CSS code to call up your image in the folder it has been saved. This will save you from using so many tables, and of course, make your page lighter.

{ background-image:url ('example.jpg');}

THANK YOU CLASS!