SlideShare a Scribd company logo
CREATING A WEBSITE
FROM HTML
SEANA LA GALA
IDS 493 E-PORTFOLIO
HOME PAGE
• Header
• Two-tone background
colors
• Words with embedded
links
• Photos with embedded
links
• Fonts
• Dual rows
BODY AND HEADER HTML
body {
font-family: Arial;
text-align:center;
padding: 20px;
background: #5DC2FF;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
color: white;
background: #0F8BD6;
}
• Change width of areas with “padding.”
• Change font size with “font size.”
• Text-align: left, center, right.
• Change colors of background or text via
corresponding arrows.
COLUMNS AND IMAGES.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left:
20px;
}
.img {
margin-left:
auto;
margin-right:
auto;
width: 50%;
padding: 20px;
}
.card {
background-
color: white;
padding: 20px;
margin-top:
20px;
ADDING TEXT AND LINKS WITHIN THE
HTML CODE
<div class="body">
<h2>
<a
href="http://www.scope002.students.digital
odu.com/Home/">Home</a> .
<a
href="http://www.scope002.students.digital
odu.com/Pregnancy101/">Pregnancy
101</a> .
<a
href="http://www.scope002.students.digital
odu.com/FirstYear101/">First Year 101</a>
.
<a
href="http://www.scope002.students.digital
odu.com/AboutMe/">About Me</a> .
<a
href="http://www.scope002.students.digital
odu.com/Contact%20Form/">Contact
Form</a>
</h2>
</div>
<div class="card">
<h2>PRODUCT OF THE
WEEK</h2>
<h5>WhatToExpect #1 Prenatal
Recommendation, April 17,
2018</h5>
<div class="img"
style="width:200px;">
<a
href="http://www.naturemade.com
/multivitamins/prenatal-and-
postnatal/multi-
prenatal#bkDsYX3CCLLlbX1k.97">
<img src="prenatal.jpg"
style="width:80%;"
alt="Prenatal"></a>

More Related Content

Similar to MultiMedia

Theme02
Theme02Theme02
Theme01
Theme01Theme01
Omeka css
Omeka cssOmeka css
Theme03
Theme03Theme03
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
 
Css tips & tricks
Css tips & tricksCss tips & tricks
Css tips & tricks
anubavam-techkt
 
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docxWeek ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
philipnelson29183
 
Webtech File.docx
Webtech File.docxWebtech File.docx
Webtech File.docx
gambleryeager
 
Theme04
Theme04Theme04
Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2
cori0506
 
City life project by ajay mishra121
City life project by ajay mishra121City life project by ajay mishra121
City life project by ajay mishra121
Ajay_Mishra121
 
CSS and Layout
CSS and LayoutCSS and Layout
CSS and Layout
Jussi Pohjolainen
 
Css code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdfCss code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdf
aroraenterprisesmbd
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
Programmer Blog
 
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
Getting to Grips with Firebug - Anthony Hortin - WordCamp SydneyGetting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
WordCamp Sydney
 
GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3
Heather Rock
 
Css presentation introdution with sample basic projects
Css presentation introdution with sample basic projectsCss presentation introdution with sample basic projects
Css presentation introdution with sample basic projects
Digital Shende
 

Similar to MultiMedia (20)

Theme02
Theme02Theme02
Theme02
 
Theme01
Theme01Theme01
Theme01
 
Omeka css
Omeka cssOmeka css
Omeka css
 
Theme03
Theme03Theme03
Theme03
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Css tips & tricks
Css tips & tricksCss tips & tricks
Css tips & tricks
 
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docxWeek ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
 
Webtech File.docx
Webtech File.docxWebtech File.docx
Webtech File.docx
 
Theme04
Theme04Theme04
Theme04
 
Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2
 
City life project by ajay mishra121
City life project by ajay mishra121City life project by ajay mishra121
City life project by ajay mishra121
 
CSS and Layout
CSS and LayoutCSS and Layout
CSS and Layout
 
Css code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdfCss code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdf
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
Getting to Grips with Firebug - Anthony Hortin - WordCamp SydneyGetting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
 
GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3
 
Css presentation introdution with sample basic projects
Css presentation introdution with sample basic projectsCss presentation introdution with sample basic projects
Css presentation introdution with sample basic projects
 

Recently uploaded

Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
amberjdewit93
 
The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
Israel Genealogy Research Association
 
Smart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICTSmart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICT
simonomuemu
 
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
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
RAHUL
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
heathfieldcps1
 
Pride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School DistrictPride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School District
David Douglas School District
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
National Information Standards Organization (NISO)
 
Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5
sayalidalavi006
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
Katrina Pritchard
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
Celine George
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
eBook.com.bd (প্রয়োজনীয় বাংলা বই)
 
How to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold MethodHow to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold Method
Celine George
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
adhitya5119
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
Colégio Santa Teresinha
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Excellence Foundation for South Sudan
 
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
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
paigestewart1632
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
Academy of Science of South Africa
 
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
 

Recently uploaded (20)

Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
 
The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
 
Smart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICTSmart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICT
 
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
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
 
Pride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School DistrictPride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School District
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
 
Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
 
How to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold MethodHow to Build a Module in Odoo 17 Using the Scaffold Method
How to Build a Module in Odoo 17 Using the Scaffold Method
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
 
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
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
 
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...
 

MultiMedia

  • 1. CREATING A WEBSITE FROM HTML SEANA LA GALA IDS 493 E-PORTFOLIO
  • 2. HOME PAGE • Header • Two-tone background colors • Words with embedded links • Photos with embedded links • Fonts • Dual rows
  • 3. BODY AND HEADER HTML body { font-family: Arial; text-align:center; padding: 20px; background: #5DC2FF; } .header { padding: 30px; font-size: 40px; text-align: center; color: white; background: #0F8BD6; } • Change width of areas with “padding.” • Change font size with “font size.” • Text-align: left, center, right. • Change colors of background or text via corresponding arrows.
  • 4. COLUMNS AND IMAGES.leftcolumn { float: left; width: 75%; } .rightcolumn { float: left; width: 25%; padding-left: 20px; } .img { margin-left: auto; margin-right: auto; width: 50%; padding: 20px; } .card { background- color: white; padding: 20px; margin-top: 20px;
  • 5. ADDING TEXT AND LINKS WITHIN THE HTML CODE <div class="body"> <h2> <a href="http://www.scope002.students.digital odu.com/Home/">Home</a> . <a href="http://www.scope002.students.digital odu.com/Pregnancy101/">Pregnancy 101</a> . <a href="http://www.scope002.students.digital odu.com/FirstYear101/">First Year 101</a> . <a href="http://www.scope002.students.digital odu.com/AboutMe/">About Me</a> . <a href="http://www.scope002.students.digital odu.com/Contact%20Form/">Contact Form</a> </h2> </div> <div class="card"> <h2>PRODUCT OF THE WEEK</h2> <h5>WhatToExpect #1 Prenatal Recommendation, April 17, 2018</h5> <div class="img" style="width:200px;"> <a href="http://www.naturemade.com /multivitamins/prenatal-and- postnatal/multi- prenatal#bkDsYX3CCLLlbX1k.97"> <img src="prenatal.jpg" style="width:80%;" alt="Prenatal"></a>