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:
Author: others
View: 0 times
Download: 0 times
Share this document with a friend
Embed Size (px)
of 41 /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
  • 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 or .

    Most tags come in pairs Example: ,

    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

    93-S2-ITIC-L07_Support/Material/PSPad/PSPad.jpg

  • HTML Structure

    13

  • HTML Structure

    14

  • HTML head and body

    15

    ...-- contains information

    (tags) about the entire document and

    linking the page to other documents:

    For example title of the web page!

    ...-- contains all

    information to be presented on the body

    of the web page.

  • Page segmenting tags

    16

    Semantic segmenting tags:

    Header: …

    Footer: …

    Navigation: …

    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

    … : Represents title of the webpage

    : Meta elements are typically used to specify page description,

    keywords, author of the document, last modified, and other metadata.

    : Link to an external style sheet

    ….: 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 elements are typically used to specify page description,

    keywords, author, viewport, charset, …

    Examples:

    Selected Head Tags - meta

  • 28

    : Link to an external style sheet

    Example:

    Application of this tag is going to be more discussed in the CSS course

    Selected Head Tags - link

  • 29

    ….: This tag is used to define a client-side script

    (JavaScript). It can be used either on the Head or the Body!!

    Example:

    var defaultBIMModel = “default.ifc;

    Selected Head Tags - script

  • Selected Body Tags

    30

  • Div tag

    31

    Division Tag a Non semantic segmenting tag:

    Division: …

    It is easier to use Division tag instead of semantic segmenting tags,

    but we are losing the semantic, then!

  • Text tags

    32

    Heading: ,

    Line Break

    Paragraph

    Emphasize:

    Phrase Markups: ,

    Span:

  • List/ table tags33

    Unordered list :

    Ordered list:

    Table:

  • Hands on HTML

    34

  • Image tag

    35

    Use tags

    How to specify Relative pathnames

    Use “.” to pointing to the parent folders. Example:

    Attributes of IMG tag

    -width, height

    -Alt

    -Align

    Example:

  • a (hyperlink) tag

    36

    Use 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:

    Visit us at: sharifCEM.COM

  • form tag

    37

    Use . . form elements . . tags

    Example:

    Model Name:

    Model Type:

    IFC

    DWG

    DXF

  • form tag

    38

    Use . . form elements . . tags

    Example:

    RVT

    IFC

    DWG

    DXF

  • Comments

    39

    Use Comments to make your HTML files readable

    Example:

  • 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!

    http://www.w3.org/http://www.w3schools.com/

  • Thank you!


Recommended