SlideShare a Scribd company logo
22-3375 Web Design I // Columbia College Chicago
Introductions
shawncalvert.com/webdesign-1
Q.
Name
Major
HTML/CSS experience
What are some things you
hope to accomplish this
semester (outside this
class)?
Why you should want
to succeed in this class:
“Graphic Design” is not media-specific
Build on your existing skills
Difficulty of learning these skills outside of a
structured environment
More jobs, better pay
It really is fun and empowering to code!
How you will succeed this class:
Take it week-by-week
Be an active learner: don’t just copy and paste, ask
lots of questions, make sure you understand the
underlying concepts, and be open to changing your
assumptions about web design and coding
If you miss classes, be serious about contacting me
(or classmates) and catching up on your work
Allow yourself time to get frustrated
and start over on your assignments
Internet
A global network
of interconnected computers.
WWW
The web is just one service of the internet.
It is system of interlinked hypertext documents
accessed via the Internet. With a web browser,
one can view web pages that may contain text,
images, videos, and other multimedia, and
navigate between them via hyperlinks.
URL / DNS / IP / HTTP
User types a URL (Uniform Resource Locator)
into a browser, e.g., www.amazon.com
The URL is sent to a DNS (Domain Name Service),
which translates the URL into an IP address, e.g.,
18.12.23.1
The correct server is found through the IP
address, which is sent an HTTP request (get), and
returns the requested html pages, images, etc,
back to the browser
Static Pages / Dynamic Pages
A static website is a group of self-contained,
individual pages (or page), sent to the browser from
the server one-page-at-a-time.
SERVER
page.html page.html page.html
Three layers of web design:
Structure, Style, Behavior
Three layers of web design
Three layers of web design
Three layers of web design
Let’s get started!
HTML Elements
Anatomy of an Element
An HTML element includes both
the HTML tag and everything between
the tag (the content).
<tag>Content</tag>
Anatomy of an Element
The element tag gives the
content structure and meaning.
<tag>Content</tag>
Anatomy of an Element
Tags normally come in pairs. The
first tag is the start tag, and the second
tag is the end tag.
<tag>Content</tag>
Anatomy of an Element
HTML has a defined set of tag
names (also called keywords) that
the browser understands.
<h1>Main Headline</h1>
Anatomy of an Element
Most elements can have attributes,
which provides additional informatin
about the element.
<html lang=”en”></html>
Anatomy of an Element
Attributes always follow the same
format: name=”value”. You can use
either single or double quotes.
<div class=”left-nav”></div>
Basic HTML Structure
doctype
html
head
body
<!DOCTYPE html>
EXCEPTION
The doctype is not actually a tag,
but a declaration, telling the browser
what kind of html you are using. The
doctype above declares HTML 5.
<html></html>
The <html> element defines
the whole HTML document.
<head></head>
The <head> element contains special
elements that instruct the browser
where to find stylesheets, provide meta
info, and more.
<body></body>
The <body> element contains
the document content (what is shown
inside the browser window).
Nesting
The use of our first three tags (html, head and body),
introduces and important concept: Nesting, which is when
tags “wrap” other tags. When you create markup, you should
indicate nesting by indenting the nested tags with 2 spaces
(preferred) or a tab.
<html>
<head> </head>
<body>
<h1><h1>
<p></p>
</body>
</html>
Where did those text styles come from?
All browsers have what is called a
“client stylesheet” that applies formatting
to your html elements, such as text size, font,
color, margins, line-height, and much more.
Your custom css overrides
some of these default styles.
But it is ugly!
Before we begin learning how to add
visual design to our pages, it is crucial
that we understand how to create a
foundation of solid structural design.

More Related Content

What's hot

HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
 
Basic Html for beginners.
Basic Html for beginners.Basic Html for beginners.
Basic Html for beginners.
Muhammad Shafique
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
DenMas Hengky
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
Eric Marilag
 
Web designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingWeb designing (1) - Html Basic Codding
Web designing (1) - Html Basic Codding
Rabiul robi
 
HTML email design and usability
HTML email design and usabilityHTML email design and usability
HTML email design and usability
Keith Kmett
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
JTechTown
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
Hend Al-Khalifa
 
Xhtml
XhtmlXhtml
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
Abhishek Kesharwani
 
Html basics
Html basicsHtml basics
Html basics
mcatahir947
 
HTML practical file
HTML practical fileHTML practical file
HTML practical file
Kuldeep Sharma
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
Hameda Hurmat
 
HTML Tags
HTML Tags HTML Tags
Code This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTMLCode This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTML
HubSpot
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
Bernardo Raposo
 
Xhtml
XhtmlXhtml
XHTML
XHTMLXHTML

What's hot (20)

HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
Basic Html for beginners.
Basic Html for beginners.Basic Html for beginners.
Basic Html for beginners.
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Web designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingWeb designing (1) - Html Basic Codding
Web designing (1) - Html Basic Codding
 
HTML email design and usability
HTML email design and usabilityHTML email design and usability
HTML email design and usability
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
Xhtml
XhtmlXhtml
Xhtml
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Html basics
Html basicsHtml basics
Html basics
 
HTML practical file
HTML practical fileHTML practical file
HTML practical file
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
HTML Tags
HTML Tags HTML Tags
HTML Tags
 
Code This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTMLCode This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTML
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Xhtml
XhtmlXhtml
Xhtml
 
XHTML
XHTMLXHTML
XHTML
 

Viewers also liked

Web design basics_02
Web design basics_02Web design basics_02
Web design basics_02
sofiagmontreal
 
Learn html through programs
Learn html through programsLearn html through programs
Learn html through programs
Thiruvikraman Ramadoss
 
Lab 3: WWW and HTML
Lab 3: WWW and HTMLLab 3: WWW and HTML
Lab 3: WWW and HTML
vanessajade
 
Basics of Web Design
Basics of Web DesignBasics of Web Design
Basics of Web Design
Staci Trekles
 
Lab 4: Introduction to HTML
Lab 4: Introduction to HTMLLab 4: Introduction to HTML
Lab 4: Introduction to HTML
vanessajade
 
Web design basics
Web design basicsWeb design basics
Web design basics
Sharmaine Resuma
 
Web Quest
Web QuestWeb Quest
Web Quest
jturn0
 
Multmedia Web Quest
Multmedia Web QuestMultmedia Web Quest
Multmedia Web Quest
RyanWhiteside
 
Fundamentals of Web building
Fundamentals of Web buildingFundamentals of Web building
Fundamentals of Web building
RC Morales
 
Ictl t2 akhir tahun
Ictl t2   akhir tahunIctl t2   akhir tahun
Ictl t2 akhir tahun
Masniza Mustafa
 
HTML practicals
HTML practicals HTML practicals
HTML practicals
Abhishek Sharma
 
Ict Presentation
Ict PresentationIct Presentation
Ict Presentation
Lim Shi Ting
 
Ictl monthly test
Ictl monthly testIctl monthly test
Ictl monthly test
Masniza Mustafa
 
What Is Ergonomics
What Is  ErgonomicsWhat Is  Ergonomics
What Is Ergonomics
ahmad bassiouny
 
ERGONOMICS
ERGONOMICSERGONOMICS
ERGONOMICS
mehreen21
 
Ergonomics Presentation
Ergonomics PresentationErgonomics Presentation
Ergonomics Presentation
kitten23
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
Joe Arcuri
 
Ergonomics Presentation Final
Ergonomics Presentation FinalErgonomics Presentation Final
Ergonomics Presentation Final
krisazavache
 
Ergonomics
ErgonomicsErgonomics
Ergonomics
Vinod Kumar Nehta
 
Computer networking devices
Computer networking devicesComputer networking devices
Computer networking devices
Rajesh Sadhukha
 

Viewers also liked (20)

Web design basics_02
Web design basics_02Web design basics_02
Web design basics_02
 
Learn html through programs
Learn html through programsLearn html through programs
Learn html through programs
 
Lab 3: WWW and HTML
Lab 3: WWW and HTMLLab 3: WWW and HTML
Lab 3: WWW and HTML
 
Basics of Web Design
Basics of Web DesignBasics of Web Design
Basics of Web Design
 
Lab 4: Introduction to HTML
Lab 4: Introduction to HTMLLab 4: Introduction to HTML
Lab 4: Introduction to HTML
 
Web design basics
Web design basicsWeb design basics
Web design basics
 
Web Quest
Web QuestWeb Quest
Web Quest
 
Multmedia Web Quest
Multmedia Web QuestMultmedia Web Quest
Multmedia Web Quest
 
Fundamentals of Web building
Fundamentals of Web buildingFundamentals of Web building
Fundamentals of Web building
 
Ictl t2 akhir tahun
Ictl t2   akhir tahunIctl t2   akhir tahun
Ictl t2 akhir tahun
 
HTML practicals
HTML practicals HTML practicals
HTML practicals
 
Ict Presentation
Ict PresentationIct Presentation
Ict Presentation
 
Ictl monthly test
Ictl monthly testIctl monthly test
Ictl monthly test
 
What Is Ergonomics
What Is  ErgonomicsWhat Is  Ergonomics
What Is Ergonomics
 
ERGONOMICS
ERGONOMICSERGONOMICS
ERGONOMICS
 
Ergonomics Presentation
Ergonomics PresentationErgonomics Presentation
Ergonomics Presentation
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
 
Ergonomics Presentation Final
Ergonomics Presentation FinalErgonomics Presentation Final
Ergonomics Presentation Final
 
Ergonomics
ErgonomicsErgonomics
Ergonomics
 
Computer networking devices
Computer networking devicesComputer networking devices
Computer networking devices
 

Similar to Web Design 1: Introductions

Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
Humphrey Humphrey
 
Html
HtmlHtml
HTML by Telerik Akademy
HTML by Telerik AkademyHTML by Telerik Akademy
HTML by Telerik Akademy
Ognyan Penkov
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
adelaticleanu
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
Durgadevi palani
 
Html
HtmlHtml
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
RamyaH11
 
Day1
Day1Day1
Lab#1 - Front End Development
Lab#1 - Front End DevelopmentLab#1 - Front End Development
Lab#1 - Front End Development
Walid Ashraf
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
Joel Linquico
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
CK Yang
 
Html basics
Html basicsHtml basics
Html basics
Vjay Vijju
 
Vision academy sachinsir_9822506209_html_java_script_notes (1)
Vision academy sachinsir_9822506209_html_java_script_notes (1)Vision academy sachinsir_9822506209_html_java_script_notes (1)
Vision academy sachinsir_9822506209_html_java_script_notes (1)
ShraddhaGurav7
 
TOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptxTOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptx
TemitopeOsadare1
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
malrad1
 
How to Create a College Website Page Using HTML
How to Create a College Website Page Using HTMLHow to Create a College Website Page Using HTML
How to Create a College Website Page Using HTML
YahyaMemon2
 
Let me design
Let me designLet me design
Let me design
Anurag Deb
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
Css Founder
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
Lee Lundrigan
 
A109 base code html
A109 base code   htmlA109 base code   html
A109 base code html
Kpc E-Learning
 

Similar to Web Design 1: Introductions (20)

Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
 
Html
HtmlHtml
Html
 
HTML by Telerik Akademy
HTML by Telerik AkademyHTML by Telerik Akademy
HTML by Telerik Akademy
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
 
Html
HtmlHtml
Html
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
Day1
Day1Day1
Day1
 
Lab#1 - Front End Development
Lab#1 - Front End DevelopmentLab#1 - Front End Development
Lab#1 - Front End Development
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
Html basics
Html basicsHtml basics
Html basics
 
Vision academy sachinsir_9822506209_html_java_script_notes (1)
Vision academy sachinsir_9822506209_html_java_script_notes (1)Vision academy sachinsir_9822506209_html_java_script_notes (1)
Vision academy sachinsir_9822506209_html_java_script_notes (1)
 
TOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptxTOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptx
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
How to Create a College Website Page Using HTML
How to Create a College Website Page Using HTMLHow to Create a College Website Page Using HTML
How to Create a College Website Page Using HTML
 
Let me design
Let me designLet me design
Let me design
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
A109 base code html
A109 base code   htmlA109 base code   html
A109 base code html
 

More from Shawn Calvert

Basics of Web Navigation
Basics of Web NavigationBasics of Web Navigation
Basics of Web Navigation
Shawn Calvert
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
Shawn Calvert
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
Shawn Calvert
 
Images on the Web
Images on the WebImages on the Web
Images on the Web
Shawn Calvert
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Shawn Calvert
 
Web Layout
Web LayoutWeb Layout
Web Layout
Shawn Calvert
 
Web Typography
Web TypographyWeb Typography
Web Typography
Shawn Calvert
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03
Shawn Calvert
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
Shawn Calvert
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX Guidelines
Shawn Calvert
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User Experience
Shawn Calvert
 
Creating Images for the Web
Creating Images for the WebCreating Images for the Web
Creating Images for the Web
Shawn Calvert
 
Web Design Process
Web Design ProcessWeb Design Process
Web Design Process
Shawn Calvert
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
Shawn Calvert
 
22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus
Shawn Calvert
 
An Overview of Stock Photography
An Overview of Stock PhotographyAn Overview of Stock Photography
An Overview of Stock Photography
Shawn Calvert
 
Color Photography
Color PhotographyColor Photography
Color Photography
Shawn Calvert
 

More from Shawn Calvert (20)

Basics of Web Navigation
Basics of Web NavigationBasics of Web Navigation
Basics of Web Navigation
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
Images on the Web
Images on the WebImages on the Web
Images on the Web
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX Guidelines
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User Experience
 
Creating Images for the Web
Creating Images for the WebCreating Images for the Web
Creating Images for the Web
 
Web Design Process
Web Design ProcessWeb Design Process
Web Design Process
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus
 
An Overview of Stock Photography
An Overview of Stock PhotographyAn Overview of Stock Photography
An Overview of Stock Photography
 
Color Photography
Color PhotographyColor Photography
Color Photography
 

Recently uploaded

A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
Steve Thomason
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
Krassimira Luka
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
TechSoup
 
HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.
deepaannamalai16
 
Bonku-Babus-Friend by Sathyajith Ray (9)
Bonku-Babus-Friend by Sathyajith Ray  (9)Bonku-Babus-Friend by Sathyajith Ray  (9)
Bonku-Babus-Friend by Sathyajith Ray (9)
nitinpv4ai
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
EduSkills OECD
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
PsychoTech Services
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
PECB
 
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdfREASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
giancarloi8888
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
Nguyen Thanh Tu Collection
 
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
RidwanHassanYusuf
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
ssuser13ffe4
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
mulvey2
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
Nicholas Montgomery
 
Lifelines of National Economy chapter for Class 10 STUDY MATERIAL PDF
Lifelines of National Economy chapter for Class 10 STUDY MATERIAL PDFLifelines of National Economy chapter for Class 10 STUDY MATERIAL PDF
Lifelines of National Economy chapter for Class 10 STUDY MATERIAL PDF
Vivekanand Anglo Vedic Academy
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
Jean Carlos Nunes Paixão
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
Jyoti Chand
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
zuzanka
 
How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17
Celine George
 

Recently uploaded (20)

A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
 
HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.
 
Bonku-Babus-Friend by Sathyajith Ray (9)
Bonku-Babus-Friend by Sathyajith Ray  (9)Bonku-Babus-Friend by Sathyajith Ray  (9)
Bonku-Babus-Friend by Sathyajith Ray (9)
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
 
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdfREASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
 
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
 
Lifelines of National Economy chapter for Class 10 STUDY MATERIAL PDF
Lifelines of National Economy chapter for Class 10 STUDY MATERIAL PDFLifelines of National Economy chapter for Class 10 STUDY MATERIAL PDF
Lifelines of National Economy chapter for Class 10 STUDY MATERIAL PDF
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
 
How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17
 

Web Design 1: Introductions

  • 1. 22-3375 Web Design I // Columbia College Chicago Introductions
  • 3. Q. Name Major HTML/CSS experience What are some things you hope to accomplish this semester (outside this class)?
  • 4. Why you should want to succeed in this class: “Graphic Design” is not media-specific Build on your existing skills Difficulty of learning these skills outside of a structured environment More jobs, better pay It really is fun and empowering to code!
  • 5. How you will succeed this class: Take it week-by-week Be an active learner: don’t just copy and paste, ask lots of questions, make sure you understand the underlying concepts, and be open to changing your assumptions about web design and coding If you miss classes, be serious about contacting me (or classmates) and catching up on your work Allow yourself time to get frustrated and start over on your assignments
  • 6.
  • 8. A global network of interconnected computers.
  • 9. WWW
  • 10. The web is just one service of the internet. It is system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks.
  • 11.
  • 12. URL / DNS / IP / HTTP
  • 13. User types a URL (Uniform Resource Locator) into a browser, e.g., www.amazon.com The URL is sent to a DNS (Domain Name Service), which translates the URL into an IP address, e.g., 18.12.23.1 The correct server is found through the IP address, which is sent an HTTP request (get), and returns the requested html pages, images, etc, back to the browser
  • 14. Static Pages / Dynamic Pages
  • 15. A static website is a group of self-contained, individual pages (or page), sent to the browser from the server one-page-at-a-time. SERVER page.html page.html page.html
  • 16. Three layers of web design: Structure, Style, Behavior
  • 17. Three layers of web design
  • 18. Three layers of web design
  • 19. Three layers of web design
  • 22. Anatomy of an Element An HTML element includes both the HTML tag and everything between the tag (the content). <tag>Content</tag>
  • 23. Anatomy of an Element The element tag gives the content structure and meaning. <tag>Content</tag>
  • 24. Anatomy of an Element Tags normally come in pairs. The first tag is the start tag, and the second tag is the end tag. <tag>Content</tag>
  • 25. Anatomy of an Element HTML has a defined set of tag names (also called keywords) that the browser understands. <h1>Main Headline</h1>
  • 26. Anatomy of an Element Most elements can have attributes, which provides additional informatin about the element. <html lang=”en”></html>
  • 27. Anatomy of an Element Attributes always follow the same format: name=”value”. You can use either single or double quotes. <div class=”left-nav”></div>
  • 30. <!DOCTYPE html> EXCEPTION The doctype is not actually a tag, but a declaration, telling the browser what kind of html you are using. The doctype above declares HTML 5.
  • 31. <html></html> The <html> element defines the whole HTML document.
  • 32. <head></head> The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info, and more.
  • 33. <body></body> The <body> element contains the document content (what is shown inside the browser window).
  • 34. Nesting The use of our first three tags (html, head and body), introduces and important concept: Nesting, which is when tags “wrap” other tags. When you create markup, you should indicate nesting by indenting the nested tags with 2 spaces (preferred) or a tab. <html> <head> </head> <body> <h1><h1> <p></p> </body> </html>
  • 35.
  • 36.
  • 37.
  • 38. Where did those text styles come from? All browsers have what is called a “client stylesheet” that applies formatting to your html elements, such as text size, font, color, margins, line-height, and much more. Your custom css overrides some of these default styles.
  • 39. But it is ugly! Before we begin learning how to add visual design to our pages, it is crucial that we understand how to create a foundation of solid structural design.