+ All Categories
Home > Documents > IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web...

IT in Constructionsharif.edu/~alvanchi/lecture/IT-L10.pdf · Remote hard-drive Local hard-drive Web...

Date post: 10-Aug-2020
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
41
Lecture 10 Internet programming - HTML basics Department of Civil Engineering, Sharif University of Technology Amin Alvanchi, PhD Construction Engineering and Management IT in Construction
Transcript
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thank you!


Recommended