SlideShare a Scribd company logo
1 of 44
Download to read offline
Create Web Pages
with HTML & CSS
Hans-Petter Halvorsen
http://www.halvorsen.blog
Contents
• Part 1:
–Introduction to HTML and CSS
• Part 2:
–Step by Step Example
• Deploy to Web Server
–FTP
HTML & CSS
Introduction
Hans-Petter Halvorsen
http://www.halvorsen.blog
Web Site
Example
Presentation (Figures and Text) of
your Software Product
Documents available for download
(Hyperlinks)
WYSIWYG HTML Editors
• Adobe Dreamweaver (Monthly Payment)
• Kompozer (Free)
• Bluegriffon (Free)
• Sparkle ($80), etc...
Other HTML Editors (not WYSIWYG)
• Visual Studio (ASP.NET)
• Visual Studio Code
• CoffeeCup ($69, Free Trial)
• Coda ($99)
• NotePad (-> any textbased editor)
WYSIWYG – What You See Is What You Get
You dont need to know HTML syntax - Its
just like using MS Word.
Only possible to change the HTML
source code and then select “Preview”
in order to see how it looks like in a
Web Browser.
You need to know HTML syntax
Create a Web Site with Visual Studio
• Visual Studio is not well suited for creating Static HTML
Web Pages.
• Visual Studio has poor WYSIWYG Editing possibilities
• Visual Studio is more optimized for creating Dynamic
Web Pages and creating ASP.NET Web Pages in special
• For HTML pages Visual Studio Code may be a better
choice.
Simple Web Page in Visual Studio Code
Web Server
Apache Web Server or IIS Web Server
Your Development PC
PC with Web Browser
Visual Studio
FTP
E.g. WinSCP, FileZilla or
use FTP features in Visual
Studio
Upload Files
Web Page Url
HTTP
Request
Response
Clients
Visual Studio Code
Create a Web Site with Visual Studio
Note! Make sure the Source Code
should be stored in your Team
Services Project
Create a Web Site with Visual Studio
Your Start Page needs to
be named “index.htm”
Visual Studio HTML Editor
Note! Due to the brand new HTML editor in Visual Studio, static HTML files no
longer has the Design|Split|Source options enabled by default.
• That’s because the new HTML editor is the default editor for all HTML files
with the exception of ASP.NET Web Forms files (.aspx, .ascx, .master).
• However, it is only the Web Forms editor that has support for the designer
and split view.
• So all we have to do is to map our .html or .htm files to use the Web Forms
editor instead of the new HTML editor.
• Simply right-click any .html/.htm file in Solution Explorer and select Open
With…
HTML Editor in Visual Studio
Simple “WYSIWYG”
Editor + Preview
Code Editor
Create your
HTML Code here!
Simple HTML Page
Example
14
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Code
Web Browser:
Test in Browser
Hit F5 to Run It
Or Select “View in Browser”
Note! All documents
should be PDF Files!!
Hyper-
links:
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<a href="http://www.google.com">This is a link to Google</a>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">
</body>
</html>
Images:
HTML Tags Overview
<a href="http://www.google.com">This is a link to Google</a>
<b>This is my Text</b>
Hyperlink:
Bold Text:
<h1>This is my Header</h1>
Headers:
This is my Text
<br>
This is also my Text
Line Break:
<p>My first paragraph.</p>
Paragraph:
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">
Image:
<h2>This is my Header</h2>
<h3>This is my Header</h3>
<title>This is my Title</title>
Title:
<!-- Write your comments here -->
Comments:
HTML Tags - Table
<table width="200" border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>
...
<head
...
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
..
</head>
...
CSS (Cascading Style Sheet)
CSS is a stylesheet
language that describes
the presentation of an
HTML page.
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
stylesheet.css:
myfile.htm:
HTML
Good Resource for creating Web Pages with
HTML, CSS, JavaScript, SQL, etc.
http://www.w3schools.com
HTML & CSS
Step by Step Example
Hans-Petter Halvorsen
http://www.halvorsen.blog
We are going to make a Web Page like this:
Create a proper
Folder structure, e.g.:
My Web Site
/css
...
/documents
...
/html
...
/images
...
/js
...
index.html
You should always think
structure before you start coding
Start with an empty HTML Page
Create Title,
Header and Text
Create Images
Create Hyperlinks
Hyperlinks can be other
web pages, documents, etc.
Learn more HTML
• https://www.w3schools.com/html
CSS
• CSS is a language that describes the style of an
HTML document.
• CSS describes how HTML
elements should be displayed.
• Examples: Font Size, Colors,
Alignment, etc.
Inline CSS
• The CSS in part of the
HTML file
<style>
..
</style>
External CSS File
Here you see a simple example:
Create CSS
Explore!
Find Colors, Font Sizes,
etc. that fits your system
Learn more CSS
• https://www.w3schools.com/css/
Bootstrap
http://www.w3schools.com/bootstrap/
Bootstrap is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first web sites.
Bootstrap is completely free to download and use!
Alternative 1
Alternative 2
Explore!
With CSS and Bootstrap you
have endless possibilities
FTP
Hans-Petter Halvorsen
http://www.halvorsen.blog
File Transfer Protocol
Web Server
• You need to deploy your files to the Web
Server
• Typically you use a FTP program
– You need to know the Host Name, and a User
Name and a Password
Web
PCs with Web Browsers
Clients
Server-side
Internet
HTML
HTML
CSS
FTP Software
• WinSCP
– https://winscp.net
• FileZilla
– https://filezilla-project.org
Hans-Petter Halvorsen
University of Southeast Norway
www.usn.no
E-mail: hans.p.halvorsen@usn.no
Web: https://www.halvorsen.blog

More Related Content

Similar to Create Web Pages by programming of your chice.pdf

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:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 

Similar to Create Web Pages by programming of your chice.pdf (20)

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
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
 
Day of code
Day of codeDay of code
Day of code
 
Web development (html)
Web development (html)Web development (html)
Web development (html)
 
David Weliver
David WeliverDavid Weliver
David Weliver
 
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:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
 
PSD to HTML Conversion
PSD to HTML ConversionPSD to HTML Conversion
PSD to HTML Conversion
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
html
htmlhtml
html
 
INTRODUCTION FOR HTML
INTRODUCTION  FOR HTML INTRODUCTION  FOR HTML
INTRODUCTION FOR HTML
 
Html5 elements-Kip Academy
Html5 elements-Kip AcademyHtml5 elements-Kip Academy
Html5 elements-Kip Academy
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
INTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxINTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptx
 
HyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.pptHyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.ppt
 

Recently uploaded

NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
joshuaclack73
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
pillahdonald
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets Durability
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Mark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est ShirtMark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est Shirt
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
Avoid these common UI/UX design mistakes
 Avoid these common UI/UX design mistakes Avoid these common UI/UX design mistakes
Avoid these common UI/UX design mistakes
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 

Create Web Pages by programming of your chice.pdf

  • 1. Create Web Pages with HTML & CSS Hans-Petter Halvorsen http://www.halvorsen.blog
  • 2. Contents • Part 1: –Introduction to HTML and CSS • Part 2: –Step by Step Example • Deploy to Web Server –FTP
  • 3. HTML & CSS Introduction Hans-Petter Halvorsen http://www.halvorsen.blog
  • 4. Web Site Example Presentation (Figures and Text) of your Software Product Documents available for download (Hyperlinks)
  • 5. WYSIWYG HTML Editors • Adobe Dreamweaver (Monthly Payment) • Kompozer (Free) • Bluegriffon (Free) • Sparkle ($80), etc... Other HTML Editors (not WYSIWYG) • Visual Studio (ASP.NET) • Visual Studio Code • CoffeeCup ($69, Free Trial) • Coda ($99) • NotePad (-> any textbased editor) WYSIWYG – What You See Is What You Get You dont need to know HTML syntax - Its just like using MS Word. Only possible to change the HTML source code and then select “Preview” in order to see how it looks like in a Web Browser. You need to know HTML syntax
  • 6. Create a Web Site with Visual Studio • Visual Studio is not well suited for creating Static HTML Web Pages. • Visual Studio has poor WYSIWYG Editing possibilities • Visual Studio is more optimized for creating Dynamic Web Pages and creating ASP.NET Web Pages in special • For HTML pages Visual Studio Code may be a better choice.
  • 7. Simple Web Page in Visual Studio Code
  • 8. Web Server Apache Web Server or IIS Web Server Your Development PC PC with Web Browser Visual Studio FTP E.g. WinSCP, FileZilla or use FTP features in Visual Studio Upload Files Web Page Url HTTP Request Response Clients Visual Studio Code
  • 9. Create a Web Site with Visual Studio Note! Make sure the Source Code should be stored in your Team Services Project
  • 10. Create a Web Site with Visual Studio Your Start Page needs to be named “index.htm”
  • 11. Visual Studio HTML Editor Note! Due to the brand new HTML editor in Visual Studio, static HTML files no longer has the Design|Split|Source options enabled by default. • That’s because the new HTML editor is the default editor for all HTML files with the exception of ASP.NET Web Forms files (.aspx, .ascx, .master). • However, it is only the Web Forms editor that has support for the designer and split view. • So all we have to do is to map our .html or .htm files to use the Web Forms editor instead of the new HTML editor. • Simply right-click any .html/.htm file in Solution Explorer and select Open With…
  • 12. HTML Editor in Visual Studio
  • 13. Simple “WYSIWYG” Editor + Preview Code Editor Create your HTML Code here!
  • 14. Simple HTML Page Example 14 <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> HTML Code Web Browser:
  • 15. Test in Browser Hit F5 to Run It Or Select “View in Browser” Note! All documents should be PDF Files!!
  • 16. Hyper- links: <!DOCTYPE html> <html> <body> <h1>This is a heading</h1> <a href="http://www.google.com">This is a link to Google</a> </body> </html> <!DOCTYPE html> <html> <body> <h1>This is a heading</h1> <img src=“myimage.jpg" alt=”blabla" width="104" height="142"> </body> </html> Images:
  • 17. HTML Tags Overview <a href="http://www.google.com">This is a link to Google</a> <b>This is my Text</b> Hyperlink: Bold Text: <h1>This is my Header</h1> Headers: This is my Text <br> This is also my Text Line Break: <p>My first paragraph.</p> Paragraph: <img src=“myimage.jpg" alt=”blabla" width="104" height="142"> Image: <h2>This is my Header</h2> <h3>This is my Header</h3> <title>This is my Title</title> Title: <!-- Write your comments here --> Comments:
  • 18. HTML Tags - Table <table width="200" border="1"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr> <tr> <td>i</td> <td>j</td> <td>k</td> <td>l</td> </tr> </table>
  • 19. ... <head ... <link rel="stylesheet" type="text/css" href="stylesheet.css" /> .. </head> ... CSS (Cascading Style Sheet) CSS is a stylesheet language that describes the presentation of an HTML page. body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; } stylesheet.css: myfile.htm:
  • 20. HTML Good Resource for creating Web Pages with HTML, CSS, JavaScript, SQL, etc. http://www.w3schools.com
  • 21. HTML & CSS Step by Step Example Hans-Petter Halvorsen http://www.halvorsen.blog
  • 22. We are going to make a Web Page like this:
  • 23. Create a proper Folder structure, e.g.: My Web Site /css ... /documents ... /html ... /images ... /js ... index.html You should always think structure before you start coding
  • 24. Start with an empty HTML Page
  • 27. Create Hyperlinks Hyperlinks can be other web pages, documents, etc.
  • 28. Learn more HTML • https://www.w3schools.com/html
  • 29. CSS • CSS is a language that describes the style of an HTML document. • CSS describes how HTML elements should be displayed. • Examples: Font Size, Colors, Alignment, etc.
  • 30. Inline CSS • The CSS in part of the HTML file <style> .. </style>
  • 31. External CSS File Here you see a simple example:
  • 33.
  • 34. Explore! Find Colors, Font Sizes, etc. that fits your system
  • 35. Learn more CSS • https://www.w3schools.com/css/
  • 36. Bootstrap http://www.w3schools.com/bootstrap/ Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is completely free to download and use!
  • 39. Explore! With CSS and Bootstrap you have endless possibilities
  • 41. Web Server • You need to deploy your files to the Web Server • Typically you use a FTP program – You need to know the Host Name, and a User Name and a Password
  • 42. Web PCs with Web Browsers Clients Server-side Internet HTML HTML CSS
  • 43. FTP Software • WinSCP – https://winscp.net • FileZilla – https://filezilla-project.org
  • 44. Hans-Petter Halvorsen University of Southeast Norway www.usn.no E-mail: hans.p.halvorsen@usn.no Web: https://www.halvorsen.blog