Create Web Pages by programming of your chice.pdf

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

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

Note! Make sure the Source Code
should be stored in your Team
Services Project

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…

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:
<title>This is my Title</title>
Title:

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

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

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 Web Pages by programming of your chice.pdf

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!

Explore!
With CSS and Bootstrap you
have endless possibilities

FTP
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

University of Southeast Norway
www.usn.no
E-mail: hans.p.halvorsen@usn.no
Web: https://www.halvorsen.blog

Create Web Pages by programming of your chice.pdf

More Related Content

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

Recently uploaded (20)

Create Web Pages by programming of your chice.pdf