Enviar pesquisa
Carregar
Ch. 4 FIT5, CIS 110 13F
•
0 gostou
•
1,012 visualizações
M
mh-108
Seguir
Educação
Tecnologia
Arte e fotografia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 27
Baixar agora
Baixar para ler offline
Recomendados
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
Recomendados
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
Mais conteúdo relacionado
Destaque
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
Destaque
(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
Безопасная одежда
Безопасная одежда
Semelhante a 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
Semelhante a 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
Mais de 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
Mais de 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
Último
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
RoyAbrique
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
Maestría en Comunicación Digital Interactiva - UNR
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
Jayanti Pande
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
Sayali Powar
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
Thiyagu K
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
GeoBlogs
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
RaunakKeshri1
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
manuelaromero2013
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
TechSoup
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
microwave assisted reaction. General introduction
microwave assisted reaction. General introduction
Maksud Ahmed
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
GaneshChakor2
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
iammrhaywood
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
pboyjonauth
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
dawncurless
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
FatimaKhan178732
Último
(20)
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
microwave assisted reaction. General introduction
microwave assisted reaction. General introduction
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
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
Baixar agora