Top Banner
DanangWahyu Utomo, M.Kom, M.CS PENGANTAR HTML Danang Wahyu Utomo [email protected] +6285 740 955 623
19

PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Mar 31, 2019

Download

Documents

vohanh
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

PENGANTAR HTML

Danang Wahyu Utomo

[email protected]

+6285 740 955 623

Page 2: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Objectives

Basic HTML

HTML headings

HTML paragraphs

HTML links

HTML images

Page 3: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

HTML

HyperText Markup Language

HTML adalah language untuk mendeskripsikan Web pages

HTML adalah kumpulan dari markup tags

Keyword HTML dimulai dengan <html>

Tag HTML dimulai dengan <> dan diakhiri </>

contoh : <b> </b>

HTML dapat ditulis menggunakan editor notepad atau

Dreamweaver

Page 4: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

HTML

<html><head>

HTML</head><body>

<h1>My First HTML</h1></body></html>

Page 5: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

HTML Headings

Heading pada HTML didefinisikan dengan <h1> sampai<h6>

<h1>Heading 1</h1><h2>Heading 2</h2>…<h6>Heading 6</h6>

Page 6: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Write your name using heading (h1 – h6)

Page 7: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Tulis dalam html

Little Womenby Louisa May Alcott

Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War. The story is based the childhood experiences Alcott shared with her real life sisters, Anna, May and Elzabeth. The novel stars Jo, Meg, Beth and Amy and explores the rich nuances of family and family relationships.

Page 8: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

HTML Paragraphs

Paragraf pada HTML bisa didefinisikan menggunakan <p>

</p>

<p>My Paragraph</p><p>My Second Paragraph</p><p>My Third Paragraph</p>

Page 9: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Little Women

by Louisa May Alcott

Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War. The story is based the childhood experiences Alcott shared with her real life sisters, Anna, May and Elzabeth.

The novel stars Jo, Meg, Beth and Amy and explores the rich nuances of family and family relationships.

Page 10: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

HTML Links

Digunakan untuk membuat link antar halaman website

Link pada HTML didefinisikan dengan <a href></a>

<a href=“second.html”>Second Page</a>

<a href=www.w3schools.com>w3schools</a>

Page 1 Page 2

Page 11: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Little Womenby Louisa May Alcott

Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War. Next

Little Womenby Louisa May Alcott

Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War. The story is based the childhood experiences Alcott shared with her real life sisters, Anna, May and Elzabeth. The novel stars Jo, Meg, Beth and Amy and explores the rich nuances of family and family relationships. Back

Page 12: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

HTML Images

Digunakan untuk menampilkan gambar pada website

Pada HTML menggunakan tag <img src=“”>

<img src=“udinus.jpg” width=“104” height=“104”>

Page 13: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Page 14: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Little Womenby Louisa May Alcott

Published in 1868, Little Women follows the lives, loves and tribulations of fours sisters growing up during the American Civil War. The story is based the childhood experiences Alcott shared with her real life sisters, Anna, May and Elzabeth.

Page 15: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Content Element

Paragraphs <p>, preformatted sections <pre>, line break

<br>

Grouping elements

<div>, <header>, <nav>, <section>, <hr>

Phrase elements

<em>,<strong>,<abbr>,<blockquote>

Lists

unordered list : <ul> and <li>

ordered list : <ol> and <li>

Page 16: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Comments

Use <!-- … -->

<!--<p>my first paragraph</p>

-->

Page 17: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

BIODATA MAHASISWA UDINUS

Nama : RussellTempat Tanggal Lahir : London, 11 November 2014Jurusan : Teknik InformatikaFakultas : Ilmu Komputer

Photo

Page 18: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Buat short story dilengkapi

gambar, cerita berparagraf, dan

tampilan sebagai berikut.

Short Story : title

• part one

• part two

• part three

• part -N

Part One

…Next

Part Two

… Back | Next

Part Three

… Back | Next

IMG

Page 19: PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Danang Wahyu Utomo, M.Kom, M.CS

Latihan

Buat html tentang berita

(seperti contoh)

Minimal 3 paragraf

Situs dilengkapi dengan link.

Minimal 2 link