IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web...
Transcript of IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web...
![Page 1: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/1.jpg)
Lecture 10
Internet programming - HTML basics
Department of Civil Engineering, Sharif University of Technology
Amin Alvanchi, PhD
Construction Engineering and Management
IT in Construction
![Page 2: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/2.jpg)
Outline
2
Introduction
HTML Structure
HTML Code View
Selected Head Tags
Selected Body Tags
![Page 3: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/3.jpg)
Introduction
3
![Page 4: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/4.jpg)
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
![Page 5: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/5.jpg)
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
![Page 6: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/6.jpg)
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
![Page 7: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/7.jpg)
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
…
![Page 8: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/8.jpg)
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
![Page 9: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/9.jpg)
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!
![Page 10: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/10.jpg)
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
![Page 11: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/11.jpg)
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!
![Page 12: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/12.jpg)
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
![Page 13: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/13.jpg)
HTML Structure
13
![Page 14: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/14.jpg)
HTML Structure
14
![Page 15: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/15.jpg)
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 16: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/16.jpg)
Page segmenting tags
16
Semantic segmenting tags:
Header: <header>… </header>
Footer: <footer>…</footer>
Navigation: <nav>…</nav>
Section: <section>… </section>
![Page 17: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/17.jpg)
Page segmenting tags
17
Header
Section 1
Section 3
Footer
Section 2
Body
Navigation
![Page 18: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/18.jpg)
18
How is the
segmenting
structure for
the page:
![Page 19: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/19.jpg)
19
How is the
segmenting
structure for
the page:
![Page 20: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/20.jpg)
Hands on HTML
20
![Page 21: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/21.jpg)
HTML Code View
21
![Page 22: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/22.jpg)
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 23: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/23.jpg)
Page segmenting tags
23
Inspect elements:
![Page 24: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/24.jpg)
Page segmenting tags
24
Return the HTML code:
![Page 25: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/25.jpg)
Selected Head Tags
25
![Page 26: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/26.jpg)
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
![Page 27: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/27.jpg)
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
![Page 28: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/28.jpg)
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
![Page 29: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/29.jpg)
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
![Page 30: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/30.jpg)
Selected Body Tags
30
![Page 31: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/31.jpg)
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!
![Page 32: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/32.jpg)
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>
![Page 33: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/33.jpg)
List/ table tags33
Unordered list : <UL><li>
Ordered list: <OL><li>
Table: <Table> <tr> <td>
![Page 34: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/34.jpg)
Hands on HTML
34
![Page 35: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/35.jpg)
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>
![Page 36: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/36.jpg)
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>
![Page 37: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/37.jpg)
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>
![Page 38: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/38.jpg)
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>
![Page 39: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/39.jpg)
Comments
39
Use Comments to make your HTML files readable
Example:
<!-- This was our quick tutorial on HTML -->
![Page 40: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/40.jpg)
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!
![Page 41: IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web Browser HTML HTML Different Programming Codes HTML Internet Server. Static Vs Dynamic](https://reader033.fdocuments.net/reader033/viewer/2022050523/5fa6d5e3f176dc297d49f7eb/html5/thumbnails/41.jpg)
Thank you!