Suche senden
Hochladen
Ch. 4 FIT5, CIS 110 13F
•
0 gefällt mir
•
1,012 views
M
mh-108
Folgen
Bildung
Technologie
Kunst & Fotos
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 27
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Themes: What they Are - How To Use 'Em - DaytonWP November 2012 MeetUp
Themes: What they Are - How To Use 'Em - DaytonWP November 2012 MeetUp
DaytonWP
The Lazy Developer's Guide to Cloud Foundry - Holly Cummins
The Lazy Developer's Guide to Cloud Foundry - Holly Cummins
JAXLondon2014
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Rac lecture 5
Rac lecture 5
Apoorv Pandey
Rtdna facebook 082313_final
Rtdna facebook 082313_final
Donna Petersen
Разумное потребление тепла.
Разумное потребление тепла.
Yuliya Kyamileva
Ch. 2 HTML5, CIS 110 13F
Ch. 2 HTML5, CIS 110 13F
mh-108
Naina gupta ; compensation plan in indian airways
Naina gupta ; compensation plan in indian airways
Naina Gupta
Empfohlen
Themes: What they Are - How To Use 'Em - DaytonWP November 2012 MeetUp
Themes: What they Are - How To Use 'Em - DaytonWP November 2012 MeetUp
DaytonWP
The Lazy Developer's Guide to Cloud Foundry - Holly Cummins
The Lazy Developer's Guide to Cloud Foundry - Holly Cummins
JAXLondon2014
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Rac lecture 5
Rac lecture 5
Apoorv Pandey
Rtdna facebook 082313_final
Rtdna facebook 082313_final
Donna Petersen
Разумное потребление тепла.
Разумное потребление тепла.
Yuliya Kyamileva
Ch. 2 HTML5, CIS 110 13F
Ch. 2 HTML5, CIS 110 13F
mh-108
Naina gupta ; compensation plan in indian airways
Naina gupta ; compensation plan in indian airways
Naina Gupta
Direct marketing of agriculture produce Training Program at Barabanki
Direct marketing of agriculture produce Training Program at Barabanki
promptinfotech
Ch. 1 HTML5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13F
mh-108
Осознанное потребление.
Осознанное потребление.
Yuliya Kyamileva
Eligibility Criteria for Agri Consultants
Eligibility Criteria for Agri Consultants
promptinfotech
Manpower || Paccific Agro Lucknow Pvt Ltd.
Manpower || Paccific Agro Lucknow Pvt Ltd.
promptinfotech
2484615
2484615
Aqsa Khan
TAR Lazio: il Ministro dell'Interno ed il Prefetto non possono annullare le t...
TAR Lazio: il Ministro dell'Interno ed il Prefetto non possono annullare le t...
Mario Di Carlo
The function of the heart
The function of the heart
Louise Crocombe
Ch. 8 FIT5, CIS 110 13F
Ch. 8 FIT5, CIS 110 13F
mh-108
Lawrence house funds
Lawrence house funds
housefunds57
Paccific Agro Lucknow Pvt Ltd.
Paccific Agro Lucknow Pvt Ltd.
promptinfotech
Rac lecture 4
Rac lecture 4
Apoorv Pandey
Ch. 17 FIT5, CIS 110 13F
Ch. 17 FIT5, CIS 110 13F
mh-108
Layer session
Layer session
Herdi Fauzi
Práctica cero a la oportunidad de empresa
Práctica cero a la oportunidad de empresa
Michael Julca Requejo
Sim ohms law
Sim ohms law
songokou13
Rac lecture 3
Rac lecture 3
Apoorv Pandey
Al toolz
Al toolz
Dipanwita Gupta
Rac lecture 1
Rac lecture 1
Apoorv Pandey
Безопасная одежда
Безопасная одежда
Yuliya Kyamileva
Chapter4
Chapter4
cpashke
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Weitere ähnliche Inhalte
Andere mochten auch
Direct marketing of agriculture produce Training Program at Barabanki
Direct marketing of agriculture produce Training Program at Barabanki
promptinfotech
Ch. 1 HTML5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13F
mh-108
Осознанное потребление.
Осознанное потребление.
Yuliya Kyamileva
Eligibility Criteria for Agri Consultants
Eligibility Criteria for Agri Consultants
promptinfotech
Manpower || Paccific Agro Lucknow Pvt Ltd.
Manpower || Paccific Agro Lucknow Pvt Ltd.
promptinfotech
2484615
2484615
Aqsa Khan
TAR Lazio: il Ministro dell'Interno ed il Prefetto non possono annullare le t...
TAR Lazio: il Ministro dell'Interno ed il Prefetto non possono annullare le t...
Mario Di Carlo
The function of the heart
The function of the heart
Louise Crocombe
Ch. 8 FIT5, CIS 110 13F
Ch. 8 FIT5, CIS 110 13F
mh-108
Lawrence house funds
Lawrence house funds
housefunds57
Paccific Agro Lucknow Pvt Ltd.
Paccific Agro Lucknow Pvt Ltd.
promptinfotech
Rac lecture 4
Rac lecture 4
Apoorv Pandey
Ch. 17 FIT5, CIS 110 13F
Ch. 17 FIT5, CIS 110 13F
mh-108
Layer session
Layer session
Herdi Fauzi
Práctica cero a la oportunidad de empresa
Práctica cero a la oportunidad de empresa
Michael Julca Requejo
Sim ohms law
Sim ohms law
songokou13
Rac lecture 3
Rac lecture 3
Apoorv Pandey
Al toolz
Al toolz
Dipanwita Gupta
Rac lecture 1
Rac lecture 1
Apoorv Pandey
Безопасная одежда
Безопасная одежда
Yuliya Kyamileva
Andere mochten auch
(20)
Direct marketing of agriculture produce Training Program at Barabanki
Direct marketing of agriculture produce Training Program at Barabanki
Ch. 1 HTML5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13F
Осознанное потребление.
Осознанное потребление.
Eligibility Criteria for Agri Consultants
Eligibility Criteria for Agri Consultants
Manpower || Paccific Agro Lucknow Pvt Ltd.
Manpower || Paccific Agro Lucknow Pvt Ltd.
2484615
2484615
TAR Lazio: il Ministro dell'Interno ed il Prefetto non possono annullare le t...
TAR Lazio: il Ministro dell'Interno ed il Prefetto non possono annullare le t...
The function of the heart
The function of the heart
Ch. 8 FIT5, CIS 110 13F
Ch. 8 FIT5, CIS 110 13F
Lawrence house funds
Lawrence house funds
Paccific Agro Lucknow Pvt Ltd.
Paccific Agro Lucknow Pvt Ltd.
Rac lecture 4
Rac lecture 4
Ch. 17 FIT5, CIS 110 13F
Ch. 17 FIT5, CIS 110 13F
Layer session
Layer session
Práctica cero a la oportunidad de empresa
Práctica cero a la oportunidad de empresa
Sim ohms law
Sim ohms law
Rac lecture 3
Rac lecture 3
Al toolz
Al toolz
Rac lecture 1
Rac lecture 1
Безопасная одежда
Безопасная одежда
Ähnlich wie Ch. 4 FIT5, CIS 110 13F
Chapter4
Chapter4
cpashke
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter5
Chapter5
DeAnna Gossett
Chapter7
Chapter7
DeAnna Gossett
Chapter4
Chapter4
DeAnna Gossett
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Chapter11
Chapter11
DeAnna Gossett
Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
Ernie Hsiung
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Nicole77777
Ähnlich wie Ch. 4 FIT5, CIS 110 13F
(10)
Chapter4
Chapter4
Chapter 11 - Web Design
Chapter 11 - Web Design
Chapter 5 - Web Design
Chapter 5 - Web Design
Chapter5
Chapter5
Chapter7
Chapter7
Chapter4
Chapter4
Chapter 7 - Web Design
Chapter 7 - Web Design
Chapter11
Chapter11
Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Mehr von mh-108
Ch. 16 Database Case Study: XML/XSLT
Ch. 16 Database Case Study: XML/XSLT
mh-108
Ch. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13F
mh-108
Ch. 10 FIT5, CIS 110 13F
Ch. 10 FIT5, CIS 110 13F
mh-108
Ch. 12 FIT5, CIS 110 13F
Ch. 12 FIT5, CIS 110 13F
mh-108
Ch. 7 FIT5, CIS 110 13F
Ch. 7 FIT5, CIS 110 13F
mh-108
Ch. 3 HTML5, CIS 110 13F
Ch. 3 HTML5, CIS 110 13F
mh-108
Ch. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13F
mh-108
FIT5 Ch. 5, CIS 110 13F
FIT5 Ch. 5, CIS 110 13F
mh-108
Mehr von mh-108
(8)
Ch. 16 Database Case Study: XML/XSLT
Ch. 16 Database Case Study: XML/XSLT
Ch. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13F
Ch. 10 FIT5, CIS 110 13F
Ch. 10 FIT5, CIS 110 13F
Ch. 12 FIT5, CIS 110 13F
Ch. 12 FIT5, CIS 110 13F
Ch. 7 FIT5, CIS 110 13F
Ch. 7 FIT5, CIS 110 13F
Ch. 3 HTML5, CIS 110 13F
Ch. 3 HTML5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13F
FIT5 Ch. 5, CIS 110 13F
FIT5 Ch. 5, CIS 110 13F
Kürzlich hochgeladen
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
VishalSingh1417
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Denish Jangid
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
MaryamAhmad92
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
VishalSingh1417
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
camerronhm
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
microwave assisted reaction. General introduction
microwave assisted reaction. General introduction
Maksud Ahmed
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
TechSoup
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
Jisc
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
christianmathematics
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
jbellavia9
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
Poonam Aher Patil
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
pradhanghanshyam7136
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
bronxfugly43
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
christianmathematics
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
Nirmal Dwivedi
PROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docx
PoojaSen20
Kürzlich hochgeladen
(20)
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
microwave assisted reaction. General introduction
microwave assisted reaction. General introduction
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
PROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docx
Ch. 4 FIT5, CIS 110 13F
1.
Copyright © Terry
Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1Copyright © Terry Felke-Morris Wednesday, April 9, 14
2.
Copyright © Terry
Felke-Morris HORIZONTAL RULE ELEMENT !Configures a horizontal line !XHTML Syntax: <hr /> !HTML5 Syntax: <hr> 3 Wednesday, April 9, 14
3.
Copyright © Terry
Felke-Morris CSS BORDER PROPERTY !Configures a border on the top, right, bottom, and left sides of an element !Consists of ! border-width ! border-style ! border-color h2 { border: 2px solid #ff0000 } Wednesday, April 9, 14
4.
Copyright © Terry
Felke-Morris CSS BORDERS: BLOCK / INLINE ELEMENTS ! Block display element ◦ default width of element content extends to browser margin (or specified width) ! Inline display element ◦ Border closely outlines the element content h2 { border: 2px solid #ff0000; } a { border: 2px solid #ff0000; } Wednesday, April 9, 14
5.
Copyright © Terry
Felke-Morris CSS PADDING PROPERTY !Configures empty space between the content of the HTML element and the border !Set to 0px by default h2 { border: 2px solid #ff0000; padding: 5px; } No padding property configured: Wednesday, April 9, 14
6.
Copyright © Terry
Felke-Morris CSS PADDING PROPERTY SHORTHAND: TWO VALUES !Two numeric values or percentages ! first value configures top and bottom padding ! the second value configures left and right padding ! h2 { border: 2px solid #ff0000; background-color: #cccccc; padding: 20px 10px; } Wednesday, April 9, 14
7.
Copyright © Terry
Felke-Morris ! Four numeric values or percentages ◦ Configure top, right, bottom, and left padding h2 { border: 2px solid #ff0000; width: 250px; background-color: #cccccc; padding: 30px 10px 5px 20px; } CSS PADDING PROPERTY SHORTHAND: FOUR VALUES Wednesday, April 9, 14
8.
Copyright © Terry
Felke-Morris TYPES OF GRAPHICS ! Graphic types: !GIF !JPG !PNG 14 Wednesday, April 9, 14
9.
Copyright © Terry
Felke-Morris GIF ! Graphics Interchange Format ! Best used for line art and logos ! Maximum of 256 colors ! One color can be configured as transparent ! Can be animated ! Uses lossless compression 15 Background color – no transparency Background color configured to be transparent Wednesday, April 9, 14
10.
Copyright © Terry
Felke-Morris JPEG ! Joint Photographic Experts Group ! Best used for photographs ! Up to 16.7 million colors ! Lossy compression ! Cannot be animated ! Cannot be made transparent 16 Wednesday, April 9, 14
11.
Copyright © Terry
Felke-Morris PNG !Portable Network Graphic !Support millions of colors !Support multiple levels of transparency !Lossless compression !Combines best of GIF & JPEG 17 Wednesday, April 9, 14
12.
Copyright © Terry
Felke-Morris HTML IMAGE ELEMENT ! Configures graphics on a web page ! src Attribute ◦ File name of the graphic ! alt Attribute ◦ Configures alternate text content (description) ! height Attribute ◦ Height of the graphic in pixels ! width Attribute ◦ Width of the graphic in pixels 18 <img src=“cake.gif” alt=“birthday cake” height=“100” width=“100”> Wednesday, April 9, 14
13.
Copyright © Terry
Felke-Morris IMAGE LINKS ! To create an image hyperlink use an anchor element to contain an image element ! Browsers automatically add a border to image links ! Configure CSS to eliminate the border img {border-style:none; } 20 Home <a href="index.html"><img src="home.gif" height="19" width="85" alt="Home"></a> Wednesday, April 9, 14
14.
Copyright © Terry
Felke-Morris THUMBNAIL IMAGE A small image configured to link to a larger version of that image. <a href=“big.jpg”><img src=“small.jpg” alt=“country road” width=“200” height=“100”></a> 21 Wednesday, April 9, 14
15.
Copyright © Terry
Felke-Morris IMAGE OPTIMIZATION ! The process of creating an image with the lowest file size that still renders a good quality image— balancing image quality and file size. ! Photographs taken with digital cameras are not usually optimized for the Web 22 Wednesday, April 9, 14
16.
Copyright © Terry
Felke-Morris OPTIMIZE AN IMAGE FOR THE WEB !Image Optimization ! Reduce the file size ! Reduce the dimensions of the image to the actual width and height of the image on the web page. !Image Editing Tools: ! GIMP (free!) ! Adobe Fireworks ! Adobe Photoshop ! http://pixlr.com/editor (free!) 23 Wednesday, April 9, 14
17.
Copyright © Terry
Felke-Morris CHOOSING NAMES FOR IMAGE FILES !Use all lowercase letters !Do not use punctuation symbols and spaces !Do not change the file extensions (should be .gif, .jpg, .jpeg, or .png) !Keep your file names short but descriptive ! i1.gif is probably too short ! myimagewithmydogonmybirthday.gif is too long ! dogbday.gif may be just about right Wednesday, April 9, 14
18.
Copyright © Terry
Felke-Morris ORGANIZING YOUR SITE <img src=“images/home.gif” alt=“Home” height=“100” width=“200”> 25 • Place images in their own folder • Code the path to the file in the src atttribute Wednesday, April 9, 14
19.
Copyright © Terry
Felke-Morris HTML5 FIGURE AND FIGCAPTION ELEMENTS Figure Element: contains a unit of content that is self-contained, such as an image, along with one optional figcaption element. <figure> <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island"> <figcaption> Island Lighthouse, Built in 1870 </figcaption> </figure> 26 Wednesday, April 9, 14
20.
Copyright © Terry
Felke-Morris CSS BACKGROUND-IMAGE PROPERTY !Configures a background-image !By default, background images tile (repeat) body { background-image: url(background1.gif); } Wednesday, April 9, 14
21.
Copyright © Terry
Felke-Morris CSS BACKGROUND-REPEAT PROPERTY Wednesday, April 9, 14
22.
Copyright © Terry
Felke-Morris USING BACKGROUND-REPEAT h2 { background-color: #d5edb3; color: #5c743d; font-family: Georgia, "Times New Roman", serif; padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no-repeat; } trilliumbullet.gif: Wednesday, April 9, 14
23.
Copyright © Terry
Felke-Morris FAVORITES ICON - FAVICON !A square image associated with a Web page !Usually named: favicon.ico !May display in the browser address bar, tab, or favorites/bookmarks list !Configure with a link tag: <link rel="icon" href="favicon.ico" type="image/x-icon"> Wednesday, April 9, 14
24.
Copyright © Terry
Felke-Morris CSS3 ROUNDED CORNERS !border-radius property ! Configures the horizontal radius and vertical radius of the corner ! Numeric value(s) with unit (pixel or em) or percentage !Browser vendor proprietary properties: ! -webkit-border-radius (for Safari & Chrome) ! -moz-border-radius (for Firefox) ! border-radius (W3C syntax) 42 Wednesday, April 9, 14
25.
Copyright © Terry
Felke-Morris EXAMPLES OF ROUNDED CORNERS ! One value for border-radius configures all four corners Example: border-radius: 15px; ! Four values for border-radius configure each corner separately Ordered by top left, top right, bottom right, bottom left Example: border-radius: 15px 30px 100px 5px; 43 Wednesday, April 9, 14
26.
Copyright © Terry
Felke-Morris CSS3 BOX-SHADOW PROPERTY !Configure the horizontal offset, vertical offset, blur radius, and valid color value !Example: #wrapper { -webkit-box-shadow: 5px 5px 5px #828282; -moz-box-shadow: 5px 5px 5px #828282; box-shadow: 5px 5px 5px #828282;} Optional keyword: inset 44 Wednesday, April 9, 14
27.
Copyright © Terry
Felke-Morris CSS3 TEXT-SHADOW PROPERTY !Configure the horizontal offset, vertical offset, blur radius, and valid color value !Example: #wrapper { text-shadow: 3px 3px 3px #666; } 45 Wednesday, April 9, 14
Jetzt herunterladen