Lecture 10
Internet programming - HTML basics
Department of Civil Engineering, Sharif University of Technology
Amin Alvanchi, PhD
Construction Engineering and Management
IT in Construction
Outline
2
Introduction
HTML Structure
HTML Code View
Selected Head Tags
Selected Body Tags
Introduction
3
Introduction
4
HTTP Server
Other
servers
(ASP.Net,
Apache,
etc)
Remote hard-drive
Local hard-drive
Web BrowserHTML
HTML
Different
Programming
Codes
HTML
Internet Server
Clien
t sid
e O
R F
ron
t en
d
Serv
er
sid
e O
R B
ack
en
d
Static Vs Dynamic web-page
5
A static web page is a web page delivered to the users
exactly as stored.
HTTP Server
Remote hard-drive
HTMLOther
servers
(ASP.Net,
Apache,
etc)
HTML
Different
Programming
CodesLocal hard-drive
Web Browser
HTML
Internet Server
Static Vs Dynamic web-page
6
Dynamic web pages evolve over time based on the users’
input and are generated by web applications servers.
HTTP Server
Other
servers
(ASP.Net,
Apache,
etc)
Remote hard-drive
Local hard-drive
Web Browser
HTML
HTML
Different
Programming
Codes
HTML
Internet Server
Static Vs Dynamic web-page
7
Static web page examples:
Personal web pages
Organization’s websites
…
Dynamic web page examples:
Email websites
Social networks
Web-based service
providers
Weblogs
…
Bootsrap framework
8
Bootstrap is a free and open-source front-end framework for
designing websites and web applications. It contains HTML-
and CSS-based design templates for typography, forms,
buttons, navigation and other interface components, as well as
optional JavaScript extensions.
Bootsrap is the framework we follow for interface development
in the course
Bootsrap framework
9
Bootstrap framework is used for designing interface of the web pages.
For the static web-pages bootstrap framework is basically the only
framework required to be used, i.e. all we need is
HTML/CSS/JavaScript.
For the dynamic web-pages we still will need to use back-end
frameworks such as ASP.NET/ SQL-Server; PHP/ MySQL; Java/ Oracle.
Unlike diversity of back-end tools, HTML, CSS and JavaScript are
dominant front-end tools used globally!
10
HTTP Server
Other
servers
(ASP.Net,
Apache,
etc)
Remote hard-drive
Local hard-drive
Web Browser
HTML
HTML
Different
Programming
Codes
HTML
Internet Server
Clien
t sid
e O
R F
ron
t en
d
Serv
er
sid
e O
R B
ack
en
d
Bootsrap framework
Bootsrap
framework
What is HTML?
11
Hypertext Markup Language (HTML) is the core language in internet surfing. It tells the browser what to show, what to do, and what to use!
HTM contains a series of text tags that are integrated into a text document.
Tags are ;
surrounded with angle brackets like this <B> or <I>.
Most tags come in pairs Example: <H1> </H1>, <Body> </Body>
The first tag turns the action on, and the second turns it off.
Hypertext Transfer Protocol (HTTP) is the main protocol for transferring data in the net!
How to create and view an HTML document?
12
You can start writing your HTML codes on any text editor
like Notepad, Notepad+, PSPad
Then just save the code with extension of HTML
You can use any Web browser (e.g., Google Chrome,
Fire fox, internet explorer) to open and view your HTML
file
HTML Structure
13
HTML Structure
14
HTML head and body
15
<head>...</head>-- contains information
(tags) about the entire document and
linking the page to other documents:
For example title of the web page!
<body>...</body>-- contains all
information to be presented on the body
of the web page.
Page segmenting tags
16
Semantic segmenting tags:
Header: <header>… </header>
Footer: <footer>…</footer>
Navigation: <nav>…</nav>
Section: <section>… </section>
Page segmenting tags
17
Header
Section 1
Section 3
Footer
Section 2
Body
Navigation
18
How is the
segmenting
structure for
the page:
19
How is the
segmenting
structure for
the page:
Hands on HTML
20
HTML Code View
21
Page segmenting tags
22
Inspect elements: Mouse-R-click-> Inspect elements
You can see the HTM segmenting structure!
Return the HTML code: Ctrl + U (Chrome and Mozilla)
You can see the HTML code!
Page segmenting tags
23
Inspect elements:
Page segmenting tags
24
Return the HTML code:
Selected Head Tags
25
26
<Title>… </Title>: Represents title of the webpage
<Meta>: Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other metadata.
<Link>: Link to an external style sheet
<script>….</script>: This tag is used to define a client-side script
(JavaScript). It can be used either on the Head or the Body!!
Selected Head Tags
27
<Meta>: Meta elements are typically used to specify page description,
keywords, author, viewport, charset, …
Examples:
<meta name="keywords" content=“IT, Construction, HTML">
<meta name="description" content=“HTML lecture in the computer
applications in construction course">
<meta name="author" content=“Amin Alvanchi">
<meta http-equiv="refresh" content=“60">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta charset="UTF-8">
Selected Head Tags - meta
28
<Link>: Link to an external style sheet
Example:
<link rel="stylesheet" type="text/css" href=“Header.css">
<link rel="stylesheet" type="text/css" href=“BodyType1.css">
<link rel="stylesheet" type="text/css" href=“BodyType3.css">
<link rel="stylesheet" type="text/css" href=“Footer.css">
Application of this tag is going to be more discussed in the CSS course
Selected Head Tags - link
29
<script>….</script>: This tag is used to define a client-side script
(JavaScript). It can be used either on the Head or the Body!!
Example:
<script type="text/javascript">
var defaultBIMModel = “default.ifc;
</script>
Selected Head Tags - script
Selected Body Tags
30
Div tag
31
Division Tag a Non semantic segmenting tag:
Division: <division>…</division>
<div>…</div>
It is easier to use Division tag instead of semantic segmenting tags,
but we are losing the semantic, then!
Text tags
32
Heading: <H1> </H1>, <H2> </H2>
Line Break <Br/>
Paragraph <P> </P>
Emphasize: <em> </em>
Phrase Markups: <I></I> ,<B></B>
Span: <span></span>
List/ table tags33
Unordered list : <UL><li>
Ordered list: <OL><li>
Table: <Table> <tr> <td>
Hands on HTML
34
Image tag
35
Use <IMG SRC=“imagefilename”> tags
How to specify Relative pathnames
Use “.” to pointing to the parent folders. Example:
Attributes of IMG tag
-width, height
-Alt
-Align
Example:
<img src="image/sharifConstructionGroup.JPG" alt="Our
photo" width=600 height=300 align=left>
a (hyperlink) tag
36
Use <a href=“filename|URL”></a>tags
Kinds of URLs
-http://www.women.or.kr
- ftp://ftp.foo.com/home/foo
- gopher://gopher.myhost.com/
- news://news.nuri.net
- mailto:[email protected]
Example:
<p>Visit us at: <a
href="http://www.sharifcem.com">sharifCEM.COM</a></p>
form tag
37
Use <form>. . form elements . .</form> tags
Example:
<form name=“ModelSelection” method=“post” action=“/bimviews.php”>
<label for= “modelName” > Model Name: </label>
<input type=“text” name=“modelName”>
<label for= “modelType” > Model Type: </label>
<select name=" modelTypeFormat1">
<option value=“RVT">RVT</option>
<option value=“IFC"> IFC </option>
<option value=" DWG "> DWG </option>
<option value=" DXF "> DXF </option>
</select>
</form>
form tag
38
Use <form>. . form elements . .</form> tags
Example:
<form name=“ModelSelection” method=“post” action=“/bimviews.php”>
<label> <input name="modelTypeFormat2" type="radio" value="RVT">RVT</label>
<label> <input name="modelTypeFormat2" type="radio" value="IFC">IFC</label>
<label> <input name="modelTypeFormat2" type="radio" value="DWG">DWG</label>
<label> <input name="modelTypeFormat2" type="radio" value="DXF">DXF</label>
<textarea name=“Feedback" rows="10" cols="30">rite your feedback here! </textarea>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<input type="submit">
</form>
Comments
39
Use Comments to make your HTML files readable
Example:
<!-- This was our quick tutorial on HTML -->
Useful websites
40
There are so much more about styling. More information can be found at:
http://www.w3.org
http://www.w3schools.com
Search your HTML
or CSS related
questions from here!
Thank you!