INTRODUCTION CODING - THE HTML AND CSS.pptx
IvanPhilipMuez
43 views
77 slides
Sep 16, 2024
Slide 1 of 77
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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!
Categories
EducationDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 43
- Slides 77
- Age 441 days
Related Slideshows
11
TLE-9-Prepare-Salad-and-Dressing.pptxkkk
MaAngelicaCanceran
30 views
12
LESSON 1 ABOUT MEDIA AND INFORMATION.pptx
JojitGueta
24 views
60
GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru
MaAngelicaCanceran
39 views
26
Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx
KaistaGlow
39 views
![Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx](https://slidepub.com/thumb/5828/284015828.jpg)
54
Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx
acecamero20
23 views
7
Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd
acecamero20
24 views