Belajar Html Dasar Bersama Rozi_192350176

Torutial  HTML Dasar

Template HTML dasar sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Heading

Heading HTML adalah judul atau subjudul yang ingin Anda tampilkan di halaman web.
Heading HTML didefinisikan dengan tag <h1>to .<h6> contoh:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
dengan  code sebagai berikut : 
</h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Mengatur Heading menggunakan properti font-size :

Heading 1

dengan code sebagai berikut:
<h1 style="font-size:60px;">Heading 1</h1>

Paragraf

paragraf adalah sebuah baris baru dan berupa teks dengan berupa elemen tag <p>

contoh paragraf sebagi berikut :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

dengan hasil sebagai berikut:

This is a paragraph.

This is another paragraph.

Style HTML

Atribut HTML styledigunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan lainnya.

contoh : 

I am normal

I am red

I am blue

I am big

a. Background Color

 membuat warna latar belakang untuk element HTML dengan code sebagai berikut:

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

hasilnya sebagai berikut:

This is a heading

This is a paragraph.


b. Text Color

untuk membuat warna pada teks dengan code sebagai berikut:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

hasilnya : 

This is a heading

This is a paragraph.


c. Font

untuk menentukan gaya tulisan dalam HTML dengan code sebagai berikut :

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

hasilnya :

This is a heading

This is a paragraph.


d. font-size

untuk membuat ukuran teks pada HTML dengan code  sebagai berikut:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

hasilnya :

This is a heading

This is a paragraph.

Text Formattting

elemen untuk mendefinisikan teks dengan arti khusus.

dengan contoh :

This text is bold

This text is italic

This is subscript and superscript


Elemen Formatting HTML

  • <b>- Teks tebal
  • <strong>- Teks penting
  • <i>- Teks miring
  • <em>- Teks yang ditekankan
  • <mark>- Teks yang ditandai
  • <small>- Teks yang lebih kecil
  • <del>- Teks yang dihapus
  • <ins>- Teks yang disisipkan
  • <sub>- Teks subskrip
  • <sup>- Teks superskrip
contoh masing-masing Formatting HTML :

    a.  Tag b
<b>This text is bold</b>
hasil : 

This text is bold

    b. Tag Strong
<strong>This text is important!</strong>
hasil : 
This text is important!

    c. Tag i  dan em
<i>This text is italic</i>
<em>This text is emphasized</em>
hasil: 
This text is italic 
This text is emphasized

    d. Tag mark
<p>Do not forget to buy <mark>milk</mark> today.</p>
hasil:

Do not forget to buy milk today.

    e. Tag del dan ins

<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

hasilnya:

My favorite color is blue red.

My favorite color is blue red.

    f. Tag sub dan sup

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

hasilnya : 

This is subscripted text.

This is superscripted text.

Komentar

<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

HTML Colors

pemberian warna pada Html  sama seperti format style tadi , pemberian warna bisa memakai format nama warna ,RGB,Hex dan HSL

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)


    a. Border Color

    codenya : 

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

    hasil :


Hello World

Hello World

Hello World

Komentar

Posting Komentar