Scribd
Upload
25 views5 pages

Ekskul Web2

The document contains examples of using HTML comments, setting background and border colors, creating links within and outside pages, embedding images and setting their properties, linking images to other pages, and floating images within text. It demonstrates various HTML tags and attributes for formatting and styling text, colors, images and links on web pages.

Uploaded by

Lutfi Atmaja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views5 pages

Ekskul Web2

The document contains examples of using HTML comments, setting background and border colors, creating links within and outside pages, embedding images and setting their properties, linking images to other pages, and floating images within text. It demonstrates various HTML tags and attributes for formatting and styling text, colors, images and links on web pages.

Uploaded by

Lutfi Atmaja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML Comment

<!DOCTYPE html>

<html>

<body>

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

<!-- <p>This is another paragraph </p> -->

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

</body>

</html>

Html colors

Background color

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper


suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

Border color

<!DOCTYPE html>

<html>

<body>
<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>

</body>

</html>

Html LINK

<!DOCTYPE html>

<html>

<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>

</html>

Link –blank

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>

</html>

HTML images

<!DOCTYPE html>
<html>

<body>

<h2>HTML Image</h2>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>

</html>

Gambar didalam folder

<!DOCTYPE html>

<html>

<body>

<h2>Images in Another Folder</h2>

<p>It is common to store images in a sub-folder. You must then include the folder name in the src
attribute:</p>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>

</html>

Animasi images

<!DOCTYPE html>

<html>

<body>

<h2>Animated Images</h2>

<p>HTML allows moving images:</p>

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>

Images link

<!DOCTYPE html>

<html>

<body>

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

</body>

</html>

Float images

<!DOCTYPE html>

<html>

<body>

<h2>Floating Images</h2>

<p><strong>Float the image to the right:</strong></p>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating
image.
</p>

<p><strong>Float the image to the left:</strong></p>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating
image.

</p>

</body>

</html>

You might also like