Download as PDF, PPTX
![B - What is a tag?• A tag is used to declare a specific type ofcontainer or element.• TAG STRUCTURE :<name (attributes (style/css)) ... > [content] </name>](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fconvertize-htmlpresentation-170406143431%2f75%2fIntro-to-HTML-CSS-41-2048.jpg&f=jpg&w=240)
![Step-1• Create a folder named Hello [Syed]• Fire up your code editor• Write Hello World and save the file asindex.html• Create another file named style.css](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fconvertize-htmlpresentation-170406143431%2f75%2fIntro-to-HTML-CSS-64-2048.jpg&f=jpg&w=240)
Uploaded bySyed Sami
PDF, PPTX1,955 views
Intro to HTML & CSS
The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.
Related topics:
Recommended
Intro to HTML & CSS
- 3.What we’ll cover?•What HTML and CSS is• Structure of a HTML Document• HTML editing software• How to create a webpage• Text, links, lists and images• Various other HTML tags• Adding CSS to a webpage• Where to learn more
- 4.
- 6.
- 7.Hypertext is textwhichcontains links to other texts.Markup languages are designed for theprocessing, definition and presentation oftext. A markup language is to define thevisual elements of the web page.
- 8.Why do weneed HTML?• To define the structure of a web page(HTML is the Skeleton of any modernwebsite)• To add contents to our page(text, pictures, videos etc…)• To link pages to one another in order tobuild an entire website
- 9.
- 10.
- 11.
- 12.Cascading meansthat stylescan fallfrom one stylesheet to another,enabling multiplestyle sheets to beused on one HTMLdocument.
- 13.Why do weneed CSS?• Allows us to style any web page• CSS describes how HTML elements shouldbe displayed• Because of its cascading nature it allowsyou to overwrite any previously definedrules
- 14.
- 15.3 Awesome Front-endTechnologiesHTMLThestructure of a web pageCSSThe styling of a web pageJavaScriptMakes a web page interactive
- 16.HTML + CSS+ JavaScript = Black Magic
- 17.How does awebpagework?
- 18.HTML + CSS= Source CodeUser-friendly visible result
- 20.How to viewthe pagesource?Right ClickSelect View pagesource from thedropdown menu
- 21.
- 22.How to inspectpageelements?Right ClickSelect Inspectfrom thedropdown menu
- 23.
- 24.Google Chrome Inspectorin ACTION
- 25.• A programmingsoftware(but every text editor will do)...• Your file, named in .html→ my-own-page.html• A browser, to display your page.What do we need?
- 26.• FileZilla toupload the page to a server(FileZilla or CyberDuck)What do we need?
- 29.Coding correctly maximizesthe chanceto have your page displayed correctly onmost of the platforms!
- 32.Email Clientsthe laterunners• Think about mail clients aseven-less-compliant browsers.
- 33.Responsive Design• Adaptsto different screen sizes• One version for all the devices thatsupports HTML and other modern webtechnologies
- 35.Now its easierthan ever tocreate mobile apps usingHTML, CSS and JavaScript.
- 36.
- 37.Like every language,HTMLand CSS have rules andstandards.HTML5 CSS3
- 39.A - Boxesprinciple• A box into a box into a box… : HTML is likeRussian dolls.• Each of those boxes is called a tag.
- 40.A - BoxesprincipleHTMLDOCUMENTHEAD BODYTABLETITLECSSPARAGRAPHIMAGE
- 41.B - Whatis a tag?• A tag is used to declare a specific type ofcontainer or element.• TAG STRUCTURE :<name (attributes (style/css)) ... > [content] </name>
- 42.Example• Code<p align=“center”style=“font-size: 34px; color: red;”>Hello World</p>• ResultHello World !
- 43.C - ABasic Page<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>My page</title></head><body><p align=“center" style="font-size:14px; color:#c00;">Hello World!</p></body></html>Whichlanguageisused→HTMLThedocumentHEAD - here:- Specialcharacters- PagetitleBody→CONTENT(hereaparagraph)Hello World !
- 44.So… where isthe CSS?
- 45.Method - 1<!DOCTYPEhtml><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>My page</title></head><body><p align="justify" style="font-size:14px;color:#c00;> Hello World!</p></body></html>
- 46.<!doctype html><html><head><title>My page</title><styletype="text/css">.p {font-size: 14px;color: #c00;text-align: center;}</style>.</head><body><p>Hello World !</p></body></html>Method - 2
- 47.<!doctype html><html><head><title>My page</title><linkrel="stylesheet" type="text/css" href="my-style.css">.</head><body><p>Hello World !</p></body></html> p {font-size: 14px;color: #c00;text-align: justify;}my-style.css :Method - 3
- 49.D – PopularHTML tags• Heading• Paragraph• Anchor / Link• Image• Unordered List• List Item• Horizontal Rule• Division• Table<h1> - <h6><p><a><img><ul><li><hr><div><table>
- 54.Time to talkabout CSS
- 59.Hands-on TutorialLets builda website and learnmaking mistakes!
- 64.Step-1• Create afolder named Hello [Syed]• Fire up your code editor• Write Hello World and save the file asindex.html• Create another file named style.css
- 65.
- 66.Let’s give atitle to our webpage
- 67.
- 68.Populate Body :Header section
- 69.Populate Body :About Me section
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.Closing Body andHTMLtags
- 78.
- 79.
- 80.
- 88.Link an externalstylesheete.g. style.css
- 89.
- 90.
- 91.
- 95.
- 96.
- 99.
- 100.
- 101.
- 102.
- 104.
- 105.
- 107.
- 108.
- 111.
- 112.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 129.Why do theyget rendereddifferently?• They are hosted in a 3rd party server• Because of security issues• Different email clients uses differentrendering engine
- 130.Solution?• We designthem considering its 1995!!• We use tables• We use inline css• We avoid complicated Layouts• We avoid HTML5 and CSS3
- 132.
- 133.<table width="300" height="200"align="center"><tr style="font-size:18px;color:#000000;" align="center"><td width="100" style="background-color:#CC0000;">Holly</td><td style="background-color:#00CCFF, color:#FFFFFF;">Molly !</td></tr></table>Holly Molly !
- 134.Some tips:• Useof <table> instead of <div>• Sliced images have to havestyle="display:block;".• Any special character in text (é, à, “, €, …)should be encoded :é → é OR € → €
- 135.Some tips:• CSSstyle has to be mainly inline (inside thetag’s style=" " attribute). If there is some CSSin the <head> section, it’s a best practice tocopy and put them at the bottom again.
- 136.Some tips:• “Pixels”(image of 1x1 pixel),like any content, has to bebefore closing </body></html>tags
- 139.THE NET NINJAInteractiveLessonsVideo Tutorials
- 141.Things we havediscussed• What HTML and CSS is• Structure of a HTML Document• HTML editing software• How to create a webpage• Text, links, lists and images• Various other HTML tags• Adding CSS to a webpage• Adding JavaScript to a webpage• Where to learn more