SlideShare a Scribd company logo
1 of 18
Ayes Chinmay
Internet
&
Web Technology
(HTML and CSS)
IWT Syllabus:
Module 1:
Web:
Internet, Word Wide Web(WWW), History of the Internet, History of the Web, Protocols Governing the Web, Types of
Websites, Web Applications, Web Projects, Web architecture, HTML, URI, HTTP, Issues in Web Development,
Webserver, web browser, Internet standards, TCP/IP Protocol suite, MIME, Cyber Laws.
Hyper Text Transfer Protocol(HTTP):
Understand the need for HTTP, URL and it Anatomy, HTTP message format, Persistent and Non-persistent Connections,
Web Caching, Proxy
Web Page Designing HTML:
Introduction to HTML, Mark up Language, HTML Tags, HTML Document Structure, HTML Comments, head, title, base,
link, style, meta, script, Heading tags, paragraph, anchor, image, video, line breaks, text formatting, lists, frames, forms.
Cascaded Style Sheet
Inline Styles, Internal Style Sheet, External Style Sheet, Selectors, Colors, Backgrounds, Background Image, Background
Attachment, Background Shorthand, Borders, Margins, Padding, Fonts, Links, Icons, Lists, Tables, Display, Position,
Overflow, Float, inline- block, Horizontal & Vertical Align, Combinators, Pseudo-classes, Pseudo-elements, Opacity
/ Transparency, Navigation Bar, Dropdowns, Image Gallery, Attribute Selectors, Forms, Counters, Website Layout, Units,
Specificity, Text Effects, Animations, Tooltip, Multiple Columns.
HTML:
 HTML stands for Hyper Text Markup Language.
 HTML was released in 1993 (27 years ago).
 HTML is the standard markup language for creating Web pages.
 HTML consists of a series of elements, which inform the browser how to
display the content .
 The latest version of HTML 5 was published in 2012. World Wide Web
Consortium (W3C) defines the specifications of HTML..
 HTML 5.2 was released on 27 May 2019 (13 months ago).
HTML Tag List:
HTML Table:
<table> element to define a table
<tr> element to define a table row
<td> element to define a table data
<th> element to define a table heading
<caption> element to define a table caption
border property to define a border
border-collapse property to collapse cell borders
text-align property to align cell text
border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
HTML Form:
TAG Definition
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
HTML Character Entities & Formatting:
CSS:
 CSS stands for Cascaded Style Sheet.
 Wium Lie has proposed the concept of CSS in 1994 (26 years ago).
 The latest version of CSS 3 was published in 1999. World Wide Web
Consortium (W3C) defines the specifications of CSS.
 Father of HTML 5, CSS 3 => “Håkon Wium Lie”Håkon Wium Lie
CSS Syntax:
Types of CSS:
1) External CSS
2) Internal CSS
3) Inline CSS
External CSS:
 With an external style sheet, you can change the look of an entire website by
changing just one file.
 Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS:
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;}
h1 {color: maroon;
margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS:
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">
This is a heading
</h1>
<p style="color:red;">
This is a paragraph.
</p>
</body>
</html>
GATE Question:
1. Consider the HTML table definition given below:
<table border=1>
<tr>
<td rowspan=2>ab</td>
<td colspan=2> cd </td>
</tr>
<tr>
<td>ef</td>
<td rowspan=2>gh</td>
</tr>
<tr>
<td colspan=2>ik</td>
</tr>
</table>
The number of rows in each column and the number of columns in each row are
(a) 2, 2, 3 and 2, 3, 2 (b) 2, 2, 3 and 2, 2, 3
(c) 2, 3, 2 and 2, 3, 2 (d) 2, 3, 2 and 2, 2, 3
(GATE 2009: 1 Mark)
Model Questions:
2. The following HTML tag is used for inserting a line break?
(a) <br/> (b) <startbreak/>
(c) <lb/> (d) <LINEBRK/>
3. Which of the following is not a pair tag?
(a) <i> (b) <u>
(c) <b> (d) <br>
4. Which of the following HTML tag will provide the largest heading
(a) <h6> (b) <h1>
(c) <head8> (d) <heading6>
Model Questions: (Cont.)
5. Linking to another place in the same or another Web page require
two A (Anchor) tags, the first with the _______ attribute and the
second with the _______ attribute.
(a) NAME, LINK (b) LINK, HREF
(c) HREF, NAME (d) TARGET, VALUE
6. The facilities available in the Internet are
A. Electronic mail.
B. Remote login.
C. File transfer.
D. Encryption technique.
(a) A and B (b) A, B and D
(c) A, B and C (d) B, C and D
Home Work
HEADER
FOOTER
IMAGE VIDEO
Next Class:
HTML & CSS & JS

More Related Content

What's hot (20)

Document object model(dom)
Document object model(dom)Document object model(dom)
Document object model(dom)
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Dom
Dom Dom
Dom
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Dom structure
Dom structureDom structure
Dom structure
 
INTRODUCTION TO DOM AND DOM TREE
INTRODUCTION TO DOM AND DOM TREEINTRODUCTION TO DOM AND DOM TREE
INTRODUCTION TO DOM AND DOM TREE
 
Introduction to the DOM
Introduction to the DOMIntroduction to the DOM
Introduction to the DOM
 
Dom
DomDom
Dom
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
 
Web Information Systems XML
Web Information Systems XMLWeb Information Systems XML
Web Information Systems XML
 
Introduction to DOM
Introduction to DOMIntroduction to DOM
Introduction to DOM
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
 
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
 
Web Information Systems Html and css
Web Information Systems Html and cssWeb Information Systems Html and css
Web Information Systems Html and css
 
introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5
 
DOM Quick Overview
DOM Quick OverviewDOM Quick Overview
DOM Quick Overview
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Web1O1 - Session 1
Web1O1 - Session 1Web1O1 - Session 1
Web1O1 - Session 1
 
Dhtml
DhtmlDhtml
Dhtml
 
The Document Object Model
The Document Object ModelThe Document Object Model
The Document Object Model
 

Similar to Internet and Web Technology (CLASS-3) [HTML & CSS]

Similar to Internet and Web Technology (CLASS-3) [HTML & CSS] (20)

web unit 2_4338494_2023_08_14_23_11.pptx
web unit 2_4338494_2023_08_14_23_11.pptxweb unit 2_4338494_2023_08_14_23_11.pptx
web unit 2_4338494_2023_08_14_23_11.pptx
 
HTML 4.0
HTML 4.0HTML 4.0
HTML 4.0
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
HTML, CSS and XML
HTML, CSS and XMLHTML, CSS and XML
HTML, CSS and XML
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
INTRODUCTION FOR HTML
INTRODUCTION  FOR HTML INTRODUCTION  FOR HTML
INTRODUCTION FOR HTML
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdf
 
HTML
HTMLHTML
HTML
 
CSS
CSSCSS
CSS
 
Html
HtmlHtml
Html
 
Html basics
Html basicsHtml basics
Html basics
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
Unit 2
Unit 2 Unit 2
Unit 2
 
HTML - LinkedIn
HTML - LinkedInHTML - LinkedIn
HTML - LinkedIn
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
HTML CSS.pdf
HTML CSS.pdfHTML CSS.pdf
HTML CSS.pdf
 

More from Ayes Chinmay

Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...Ayes Chinmay
 
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...Ayes Chinmay
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Ayes Chinmay
 
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyInternet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyAyes Chinmay
 
Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS] Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS] Ayes Chinmay
 
Internet and Web Technology (CLASS-1) [Introduction]
Internet and Web Technology (CLASS-1) [Introduction]Internet and Web Technology (CLASS-1) [Introduction]
Internet and Web Technology (CLASS-1) [Introduction]Ayes Chinmay
 

More from Ayes Chinmay (6)

Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
 
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
 
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyInternet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
 
Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS] Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS]
 
Internet and Web Technology (CLASS-1) [Introduction]
Internet and Web Technology (CLASS-1) [Introduction]Internet and Web Technology (CLASS-1) [Introduction]
Internet and Web Technology (CLASS-1) [Introduction]
 

Recently uploaded

DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...M56BOOKSTORE PRODUCT/SERVICE
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfBiting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfadityarao40181
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerunnathinaik
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfSumit Tiwari
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,Virag Sontakke
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementmkooblal
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxsocialsciencegdgrohi
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitolTechU
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupJonathanParaisoCruz
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxAvyJaneVismanos
 

Recently uploaded (20)

DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfBiting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdf
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developer
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of management
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized Group
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptx
 

Internet and Web Technology (CLASS-3) [HTML & CSS]

  • 2. IWT Syllabus: Module 1: Web: Internet, Word Wide Web(WWW), History of the Internet, History of the Web, Protocols Governing the Web, Types of Websites, Web Applications, Web Projects, Web architecture, HTML, URI, HTTP, Issues in Web Development, Webserver, web browser, Internet standards, TCP/IP Protocol suite, MIME, Cyber Laws. Hyper Text Transfer Protocol(HTTP): Understand the need for HTTP, URL and it Anatomy, HTTP message format, Persistent and Non-persistent Connections, Web Caching, Proxy Web Page Designing HTML: Introduction to HTML, Mark up Language, HTML Tags, HTML Document Structure, HTML Comments, head, title, base, link, style, meta, script, Heading tags, paragraph, anchor, image, video, line breaks, text formatting, lists, frames, forms. Cascaded Style Sheet Inline Styles, Internal Style Sheet, External Style Sheet, Selectors, Colors, Backgrounds, Background Image, Background Attachment, Background Shorthand, Borders, Margins, Padding, Fonts, Links, Icons, Lists, Tables, Display, Position, Overflow, Float, inline- block, Horizontal &amp; Vertical Align, Combinators, Pseudo-classes, Pseudo-elements, Opacity / Transparency, Navigation Bar, Dropdowns, Image Gallery, Attribute Selectors, Forms, Counters, Website Layout, Units, Specificity, Text Effects, Animations, Tooltip, Multiple Columns.
  • 3. HTML:  HTML stands for Hyper Text Markup Language.  HTML was released in 1993 (27 years ago).  HTML is the standard markup language for creating Web pages.  HTML consists of a series of elements, which inform the browser how to display the content .  The latest version of HTML 5 was published in 2012. World Wide Web Consortium (W3C) defines the specifications of HTML..  HTML 5.2 was released on 27 May 2019 (13 months ago).
  • 5. HTML Table: <table> element to define a table <tr> element to define a table row <td> element to define a table data <th> element to define a table heading <caption> element to define a table caption border property to define a border border-collapse property to collapse cell borders text-align property to align cell text border-spacing property to set the spacing between cells Use the colspan attribute to make a cell span many columns Use the rowspan attribute to make a cell span many rows
  • 6. HTML Form: TAG Definition <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <button> Defines a clickable button <datalist> Specifies a list of pre-defined options for input controls
  • 7. HTML Character Entities & Formatting:
  • 8. CSS:  CSS stands for Cascaded Style Sheet.  Wium Lie has proposed the concept of CSS in 1994 (26 years ago).  The latest version of CSS 3 was published in 1999. World Wide Web Consortium (W3C) defines the specifications of CSS.  Father of HTML 5, CSS 3 => “Håkon Wium Lie”Håkon Wium Lie
  • 10. Types of CSS: 1) External CSS 2) Internal CSS 3) Inline CSS
  • 11. External CSS:  With an external style sheet, you can change the look of an entire website by changing just one file.  Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
  • 12. Internal CSS:  An inline style may be used to apply a unique style for a single element.  To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. <!DOCTYPE html> <html> <head> <style> body {background-color: linen;} h1 {color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
  • 13. Inline CSS:  An inline style may be used to apply a unique style for a single element.  To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. <!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;"> This is a heading </h1> <p style="color:red;"> This is a paragraph. </p> </body> </html>
  • 14. GATE Question: 1. Consider the HTML table definition given below: <table border=1> <tr> <td rowspan=2>ab</td> <td colspan=2> cd </td> </tr> <tr> <td>ef</td> <td rowspan=2>gh</td> </tr> <tr> <td colspan=2>ik</td> </tr> </table> The number of rows in each column and the number of columns in each row are (a) 2, 2, 3 and 2, 3, 2 (b) 2, 2, 3 and 2, 2, 3 (c) 2, 3, 2 and 2, 3, 2 (d) 2, 3, 2 and 2, 2, 3 (GATE 2009: 1 Mark)
  • 15. Model Questions: 2. The following HTML tag is used for inserting a line break? (a) <br/> (b) <startbreak/> (c) <lb/> (d) <LINEBRK/> 3. Which of the following is not a pair tag? (a) <i> (b) <u> (c) <b> (d) <br> 4. Which of the following HTML tag will provide the largest heading (a) <h6> (b) <h1> (c) <head8> (d) <heading6>
  • 16. Model Questions: (Cont.) 5. Linking to another place in the same or another Web page require two A (Anchor) tags, the first with the _______ attribute and the second with the _______ attribute. (a) NAME, LINK (b) LINK, HREF (c) HREF, NAME (d) TARGET, VALUE 6. The facilities available in the Internet are A. Electronic mail. B. Remote login. C. File transfer. D. Encryption technique. (a) A and B (b) A, B and D (c) A, B and C (d) B, C and D
  • 18. Next Class: HTML & CSS & JS