Scribd
Upload
9 views

Pemrograman Web - 4

This document discusses various HTML tags and CSS properties for templating and layout, including <section>, <div>, <a> tags as well as display, position, and flexbox CSS properties. It provides an example page layout with header, sidebar, content, and footer sections.

Uploaded by

YouTube Gen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Pemrograman Web - 4

This document discusses various HTML tags and CSS properties for templating and layout, including <section>, <div>, <a> tags as well as display, position, and flexbox CSS properties. It provides an example page layout with header, sidebar, content, and footer sections.

Uploaded by

YouTube Gen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Pemrograman WEB

Pertemuan 4

Ir. I Putu Arie Pratama, S.T., M.T.


Templating dengan HTML dan CSS

Tag Section
• The <section> tag defines a section in a document.

Tag Div
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.

Tag A
• The <a> tag defines a hyperlink, which is used to link from one page to
another.
• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
Templating dengan HTML dan CSS

CSS Display Block


• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.

CSS Display Inline-Block


• Compared to display: block, the major difference is that display: inline-block
does not add a line-break after the element, so the element can sit next to
other elements.

CSS Display Flex (Flexbox)


• The Flexible Box Layout Module, makes it easier to design flexible responsive
layout structure without using float or positioning.
• To start using the Flexbox model, you need to first define a flex container.
Templating dengan HTML dan CSS

CSS Position Property


• The position property specifies the type of positioning method used for an
element (static, relative, absolute, fixed, or sticky).
Value Description
static Default value. Elements render in order, as they appear in the document flow
absolute The element is positioned relative to its first positioned (not static) ancestor element
fixed The element is positioned relative to the browser window
The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT
relative
position
The element is positioned based on the user's scroll position
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned
sticky
relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
Templating dengan HTML dan CSS

Header

Sidebar Content
Templating dengan HTML dan CSS
Action
Logo Header
Header

Content
Sidebar

Footer
Terima Kasih

You might also like