SlideShare a Scribd company logo
Introducing HTML & CSS..
What is HTML?
• HyperText Markup Language
What is CSS?
• Cascading Style Sheets
What does that mean!?
• JavaScript/Ruby = the blueprint
What does that mean!?
• JavaScript/Ruby = the blueprint
• HTML = the structure
What does that mean!?
• JavaScript/Ruby = the blueprint
• HTML = the structure
• CSS = everything that makes it look like a house!
• <!DOCTYPE html> must always be included to
indicate what kind of document you are creating.
• HTML page is split into two parts:
• head - title of site (not the title on the page), links
to external stylesheets/scripts
• body - content of page, what the user sees
• HTML uses elements such as <body>, <h1>, <p>,
<div> and many more.
• Great glossary of elements -
https://www.codecademy.com/articles/glossary-html
• <h1> - used for the most important heading on your
page
• <p> - defines a paragraph of text
• <a> - defines a link, but needs ‘href’ and the URL
you are pointing at to work - e.g. <a
href=“www.2017.inspirewit.com”>
• <ul> - “unordered list”.
• Each item within the list must be enclosed within an
<li> tag as well.
Indentation
• Good indentation improves readability.
• Easier for debugging.
• Some languages are indentation-dependent.
• <div> - a block container for content. Can contain
anything.
• You can have multiple divs in a document.
• Classes allow the same HTML element to be
presented differently depending on its class.
• In CSS class selectors are preceded with a ‘.’
• A class can be used to identify more than one
element.
• CSS opens with { and each line ends with ;
• We code in American, so ‘color’ not ‘colour’!
• float - pushes an element to the left/right, taken out
of the flow of the other elements.
• Pseudo element - used to style specific parts of an
element. Can be used to:
• style something when a mouse moves over it
• visited/unvisited links differently
• style an element when it gets focus (clicked on)
Chrome Developer console
• On Windows to open: Ctrl + Shift + J
• On Mac: Alt + Cmd + J
• Either: right click on an element on the page and
select “inspect element”
useful for:
• seeing the web page as the browser sees it
• debug code
• observe JavaScript being run

More Related Content

What's hot

html & css
html & css html & css
html & css
umesh patil
 
Introduction to the Web and HTML
Introduction to the Web and HTMLIntroduction to the Web and HTML
Introduction to the Web and HTML
SiddharthBorderwala
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
SiddhantSingh980217
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
CloudTech 
 
Java script tutorial
Java script tutorialJava script tutorial
Java script tutorial
Son Nguyen
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
Gurpreet singh
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
danpaquette
 
Drupal by fire
Drupal by fireDrupal by fire
Drupal by fire
EMBL-EBI Web Development
 
Html and css
Html and cssHtml and css
Html and css
Samiksha Pun
 
Cascading style sheet an introduction
Cascading style sheet   an introductionCascading style sheet   an introduction
Cascading style sheet an introduction
Himanshu Pathak
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
ShreyaShetty92
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering
adeel990
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
yht4ever
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development Basics
Tahir Shahzad
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
SiddharthBorderwala
 
Component-Oriented Web Development with Dart
Component-Oriented Web Development with DartComponent-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
C4Media
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 

What's hot (20)

html & css
html & css html & css
html & css
 
Introduction to the Web and HTML
Introduction to the Web and HTMLIntroduction to the Web and HTML
Introduction to the Web and HTML
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
Java script tutorial
Java script tutorialJava script tutorial
Java script tutorial
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Drupal by fire
Drupal by fireDrupal by fire
Drupal by fire
 
Html and css
Html and cssHtml and css
Html and css
 
Cascading style sheet an introduction
Cascading style sheet   an introductionCascading style sheet   an introduction
Cascading style sheet an introduction
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development Basics
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
 
Component-Oriented Web Development with Dart
Component-Oriented Web Development with DartComponent-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
 
Web programming css
Web programming cssWeb programming css
Web programming css
 

Viewers also liked

Frequently Asked Questions | Gainesville Dental Arts
Frequently Asked Questions | Gainesville Dental ArtsFrequently Asked Questions | Gainesville Dental Arts
Frequently Asked Questions | Gainesville Dental Arts
gainesville11
 
Hmc Outdoor Media / Billboards / Hoardings
Hmc Outdoor Media / Billboards / HoardingsHmc Outdoor Media / Billboards / Hoardings
Hmc Outdoor Media / Billboards / Hoardings
ASIM SHAIKH
 
การติดตั้งและการดาวน์โหลดโปรแกรมภาษาC
การติดตั้งและการดาวน์โหลดโปรแกรมภาษาCการติดตั้งและการดาวน์โหลดโปรแกรมภาษาC
การติดตั้งและการดาวน์โหลดโปรแกรมภาษาC
korn27122540
 
ประโยชน์ของคอมพิวเตอร์
ประโยชน์ของคอมพิวเตอร์ประโยชน์ของคอมพิวเตอร์
ประโยชน์ของคอมพิวเตอร์
korn27122540
 
โครงสร้างข้อมูล
โครงสร้างข้อมูลโครงสร้างข้อมูล
โครงสร้างข้อมูล
korn27122540
 
การควบคุมทิศทางการทำงานของโปรแกรม
การควบคุมทิศทางการทำงานของโปรแกรมการควบคุมทิศทางการทำงานของโปรแกรม
การควบคุมทิศทางการทำงานของโปรแกรม
korn27122540
 
PREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTS
PREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTSPREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTS
PREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTS
gainesville11
 
The Rise of the Brand Newsroom - Mynewsdesk redpaper
The Rise of the Brand Newsroom - Mynewsdesk redpaperThe Rise of the Brand Newsroom - Mynewsdesk redpaper
The Rise of the Brand Newsroom - Mynewsdesk redpaper
Ramya Chandrasekaran
 
องค์ประกอบของคอมพิวเตอร์
องค์ประกอบของคอมพิวเตอร์องค์ประกอบของคอมพิวเตอร์
องค์ประกอบของคอมพิวเตอร์
korn27122540
 
Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9
Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9
Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9
KANWARJITSINGH AHLUWALIA
 
GENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTS
GENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTSGENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTS
GENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTS
gainesville11
 
ตัวแปรและชนิดของข้อมูลในภาษาซี
ตัวแปรและชนิดของข้อมูลในภาษาซีตัวแปรและชนิดของข้อมูลในภาษาซี
ตัวแปรและชนิดของข้อมูลในภาษาซี
korn27122540
 
برنامج انتاج نماذج الاشتراطات التخطيطية
برنامج انتاج نماذج الاشتراطات التخطيطيةبرنامج انتاج نماذج الاشتراطات التخطيطية
برنامج انتاج نماذج الاشتراطات التخطيطية
Akram Sabry
 
ลักษณะเด่นของคอมพิวเตอร์ 8
ลักษณะเด่นของคอมพิวเตอร์ 8ลักษณะเด่นของคอมพิวเตอร์ 8
ลักษณะเด่นของคอมพิวเตอร์ 8
korn27122540
 
Enquêtes consommateur et e-commerce
Enquêtes consommateur et e-commerce Enquêtes consommateur et e-commerce
Enquêtes consommateur et e-commerce
Nicolas Bailly
 
การแสดงผลและการรับข้อมูล
การแสดงผลและการรับข้อมูลการแสดงผลและการรับข้อมูล
การแสดงผลและการรับข้อมูล
korn27122540
 
การเขียนผังงาน
การเขียนผังงานการเขียนผังงาน
การเขียนผังงาน
korn27122540
 
นิพจน์
นิพจน์นิพจน์
นิพจน์
korn27122540
 

Viewers also liked (18)

Frequently Asked Questions | Gainesville Dental Arts
Frequently Asked Questions | Gainesville Dental ArtsFrequently Asked Questions | Gainesville Dental Arts
Frequently Asked Questions | Gainesville Dental Arts
 
Hmc Outdoor Media / Billboards / Hoardings
Hmc Outdoor Media / Billboards / HoardingsHmc Outdoor Media / Billboards / Hoardings
Hmc Outdoor Media / Billboards / Hoardings
 
การติดตั้งและการดาวน์โหลดโปรแกรมภาษาC
การติดตั้งและการดาวน์โหลดโปรแกรมภาษาCการติดตั้งและการดาวน์โหลดโปรแกรมภาษาC
การติดตั้งและการดาวน์โหลดโปรแกรมภาษาC
 
ประโยชน์ของคอมพิวเตอร์
ประโยชน์ของคอมพิวเตอร์ประโยชน์ของคอมพิวเตอร์
ประโยชน์ของคอมพิวเตอร์
 
โครงสร้างข้อมูล
โครงสร้างข้อมูลโครงสร้างข้อมูล
โครงสร้างข้อมูล
 
การควบคุมทิศทางการทำงานของโปรแกรม
การควบคุมทิศทางการทำงานของโปรแกรมการควบคุมทิศทางการทำงานของโปรแกรม
การควบคุมทิศทางการทำงานของโปรแกรม
 
PREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTS
PREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTSPREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTS
PREVENTIVE DENTISTRY AT GAINESVILLE DENTAL ARTS
 
The Rise of the Brand Newsroom - Mynewsdesk redpaper
The Rise of the Brand Newsroom - Mynewsdesk redpaperThe Rise of the Brand Newsroom - Mynewsdesk redpaper
The Rise of the Brand Newsroom - Mynewsdesk redpaper
 
องค์ประกอบของคอมพิวเตอร์
องค์ประกอบของคอมพิวเตอร์องค์ประกอบของคอมพิวเตอร์
องค์ประกอบของคอมพิวเตอร์
 
Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9
Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9
Corporate%20Magazine%20-%20%20issue%20no%202 - Read Page 9
 
GENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTS
GENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTSGENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTS
GENERAL DENTISTRY SERVICES AT GAINESVILLE DENTAL ARTS
 
ตัวแปรและชนิดของข้อมูลในภาษาซี
ตัวแปรและชนิดของข้อมูลในภาษาซีตัวแปรและชนิดของข้อมูลในภาษาซี
ตัวแปรและชนิดของข้อมูลในภาษาซี
 
برنامج انتاج نماذج الاشتراطات التخطيطية
برنامج انتاج نماذج الاشتراطات التخطيطيةبرنامج انتاج نماذج الاشتراطات التخطيطية
برنامج انتاج نماذج الاشتراطات التخطيطية
 
ลักษณะเด่นของคอมพิวเตอร์ 8
ลักษณะเด่นของคอมพิวเตอร์ 8ลักษณะเด่นของคอมพิวเตอร์ 8
ลักษณะเด่นของคอมพิวเตอร์ 8
 
Enquêtes consommateur et e-commerce
Enquêtes consommateur et e-commerce Enquêtes consommateur et e-commerce
Enquêtes consommateur et e-commerce
 
การแสดงผลและการรับข้อมูล
การแสดงผลและการรับข้อมูลการแสดงผลและการรับข้อมูล
การแสดงผลและการรับข้อมูล
 
การเขียนผังงาน
การเขียนผังงานการเขียนผังงาน
การเขียนผังงาน
 
นิพจน์
นิพจน์นิพจน์
นิพจน์
 

Similar to What's a web page made of?

Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
TJ Stalcup
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Html
HtmlHtml
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
Jeff Byrnes
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
Thinkful
 
Html presentation
Html presentationHtml presentation
Html presentation
Jordan Dichev
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
TJ Stalcup
 
DHTML
DHTMLDHTML
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
vaseemshaik21
 
Class1slides
Class1slidesClass1slides
Class1slides
Alexis Goldstein
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basics
messinam
 
Web development basics
Web development basicsWeb development basics
Web development basics
Kalluri Vinay Reddy
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
ssuser568d77
 
FFW Gabrovo PMG - HTML
FFW Gabrovo PMG - HTMLFFW Gabrovo PMG - HTML
FFW Gabrovo PMG - HTML
Toni Kolev
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
Sónia
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink
 
Html
HtmlHtml

Similar to What's a web page made of? (20)

Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
 
Html
HtmlHtml
Html
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
DHTML
DHTMLDHTML
DHTML
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Class1slides
Class1slidesClass1slides
Class1slides
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basics
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
FFW Gabrovo PMG - HTML
FFW Gabrovo PMG - HTMLFFW Gabrovo PMG - HTML
FFW Gabrovo PMG - HTML
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Html
HtmlHtml
Html
 

Recently uploaded

不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
bseovas
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
zoowe
 
Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
SEO Article Boost
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
keoku
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
Trish Parr
 
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
CIOWomenMagazine
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
zyfovom
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Florence Consulting
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
Trending Blogers
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
Danica Gill
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
bseovas
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
vmemo1
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
Laura Szabó
 

Recently uploaded (20)

不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
国外证书(Lincoln毕业证)新西兰林肯大学毕业证成绩单不能毕业办理
 
Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
 
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
 

What's a web page made of?

  • 2. What is HTML? • HyperText Markup Language
  • 3. What is CSS? • Cascading Style Sheets
  • 4. What does that mean!? • JavaScript/Ruby = the blueprint
  • 5.
  • 6. What does that mean!? • JavaScript/Ruby = the blueprint • HTML = the structure
  • 7.
  • 8. What does that mean!? • JavaScript/Ruby = the blueprint • HTML = the structure • CSS = everything that makes it look like a house!
  • 9.
  • 10. • <!DOCTYPE html> must always be included to indicate what kind of document you are creating.
  • 11. • HTML page is split into two parts: • head - title of site (not the title on the page), links to external stylesheets/scripts • body - content of page, what the user sees
  • 12. • HTML uses elements such as <body>, <h1>, <p>, <div> and many more. • Great glossary of elements - https://www.codecademy.com/articles/glossary-html
  • 13. • <h1> - used for the most important heading on your page • <p> - defines a paragraph of text • <a> - defines a link, but needs ‘href’ and the URL you are pointing at to work - e.g. <a href=“www.2017.inspirewit.com”>
  • 14. • <ul> - “unordered list”. • Each item within the list must be enclosed within an <li> tag as well.
  • 15. Indentation • Good indentation improves readability. • Easier for debugging. • Some languages are indentation-dependent.
  • 16. • <div> - a block container for content. Can contain anything. • You can have multiple divs in a document.
  • 17. • Classes allow the same HTML element to be presented differently depending on its class. • In CSS class selectors are preceded with a ‘.’ • A class can be used to identify more than one element.
  • 18. • CSS opens with { and each line ends with ; • We code in American, so ‘color’ not ‘colour’!
  • 19. • float - pushes an element to the left/right, taken out of the flow of the other elements.
  • 20. • Pseudo element - used to style specific parts of an element. Can be used to: • style something when a mouse moves over it • visited/unvisited links differently • style an element when it gets focus (clicked on)
  • 21. Chrome Developer console • On Windows to open: Ctrl + Shift + J • On Mac: Alt + Cmd + J • Either: right click on an element on the page and select “inspect element”
  • 22. useful for: • seeing the web page as the browser sees it • debug code • observe JavaScript being run