3.
HTML dan CSS
Outline
1. HTML
2. CSS
1. HTML
HTML
• The Hypertext Markup Language (HTML) is a standard markup
language for displaying content in web browsers.
• It is mainly used to provide a structure to a web page so that
content is aligned in a user-friendly way.
• As it is a markup language, it is made up of tags.
• HTML is a completely platform-agnostic language. It works on
all platforms, including Linux, Windows, and Mac.
• The latest version is HTML 5. It has features like canvas, web
socket, native audio, video support, geolocation, etc.
HTML Document Example
Advantages of HTML
• It is widely used. • Easy to write and code even for
programming beginners.
• It is supported by every browser. • Allows for the utilization of templates which
• It is easy to learn and use. makes designing a web page easier.
• Useful for beginners who want to get into
• It is incredibly lightweight and loads the web designing field.
fast. • It is supported by each and every browser
• It is free. out there.
• No need to purchase any extra • HTML is built on every website.
software. • It is used for data storage like the XML
syntax.
• It runs on any other browser or
operating system. • It has various tags and attributes for
different purposes, which shorten your time
• It has a loose syntax. of coding.
Disadvantages of HTML
• It is a static language, so it cannot produce any dynamic output.
• Creating the structure of an HTML document is difficult.
• Even a small error can sometimes disrupt the whole flow of the web page.
• Creating an HTML web page from scratch is time consuming.
• It takes time to create a color scheme for any web page and to make lists, tables,
and forms out of it.
• As it is a static language, you can only create plain and static pages with it.
• Just to make a simple web page, you’ll need to write a lot of code.
• There are not many security features offered by HTML.
• As you need to write a lot of code, even for basic stuff, it creates some complexity.
• You need to check for deprecated tags and not use them. Other languages like
CSS and JavaScript have taken over the functionality of that tag.
2. CSS
CSS
• Cascading Style Sheets (CSS) is a style sheet language for
describing an HTML document’s style or appearance.
• CSS was specifically designed so that content of a web page
and the styling of a web page could be kept separate.
• Separating the content and the presentation of a web page
improves accessibility. It also helps in providing more flexibility
and control over the presentation aspects of the web page.
How to incorporate CSS into your HTML
1. Inline
2. Internal
3. External
[Link]
CSS Selectors
CSS selectors are used to target specific HTML elements you want to style.
Here are some common types:
• Element Selectors: Select elements based on their tag name (e.g., p, h1,
div).
• Class Selectors: Select elements with a specific class attribute (e.g.,
.my-class). You can apply the same class to multiple elements.
• ID Selectors: Select a single, unique element with a specific id attribute
(e.g., #my-id). IDs should only be used once per page.
• Universal Selector: Selects all elements (*).
• Attribute Selectors: Select elements based on the presence or value of an
attribute (e.g., [href] or [type="text"]).
• Pseudo-classes: Select elements based on their state (e.g., :hover,
:active).
• Pseudo-elements: Style specific parts of an element (e.g., ::before,
::after).
CSS Properties
CSS properties define the styles you want to apply to the
selected elements. Here are a few examples:
• color: Sets the text color.
• font-size: Sets the font size.
• font-family: Sets the font family.
• background-color: Sets the background color.
Example
Example with box-sizing
Layout
• CSS layout is all about arranging and positioning elements on a web
page.
• It's how you create the overall structure and visual hierarchy of your
content.
• Over time, CSS layout techniques have evolved, and modern web
development relies heavily on flexible and responsive approaches.
• Techniques:
1. Normal Flow
2. Flexbox
3. Grid
4. Float
5. Positioning
Responsive Design Example
CSS Frameworks
• A CSS framework is a set of CSS and HTML files. It expands a
frontend developer’s website design skills.
• CSS frameworks not only aid in the creation of responsive
designs but they also provide separate and symmetric layouts,
saving developers from having to start from scratch every time.
• CSS frameworks considerably accelerate development
workflow with common user interface components, grid
systems, layouts, and many other features.
CSS Framework examples
• Full-featured: Bootstrap, Foundation, Semantic UI
• Aimed at Material Design: Materialize and Material Design Lite
• Lightweight: Pure
CSS preprocessor
• A CSS preprocessor is a scripting language for extending and
assembling CSS.
• Sass ([Link] and Less ([Link] are
two preprocessors.
• Backward compatibility with conventional CSS files and syntax
elements
CSS advantages
• Less complex, which reduces the collective effort • It uses few lines of code, which increases the site
required to style a web page considerably. speed.
• Reduces the file transfer size. • Less complex, so the effort is reduced.
• CSS provides the ability to reposition content. It • Helps in creating spontaneous and consistent
helps in determining the changes within the changes.
position of web elements.
• The changes made with CSS are device friendly.
• By using CSS, a developer can easily specify a
style for an element once and repeat it multiple • Helps in creating a responsive design with media
times throughout the web page. It will queries so the websites can run smoothly on
automatically apply that required style. multiple devices.
• One style sheet can be reused across various • Easy to customize a web page.
websites and web pages. • It helps in removing insignificant tags from the
• It simplifies the maintenance of code as you main page
need to make the required changes only once in
the style sheet, and it will reflect all across the
website.
CSS disadvantages
• The CSS that works with one browser might not work properly for
another browser.
• There are different versions of CSS, which might create confusion.
• In terms of security, CSS is not the best.
• Browser compatibility for different versions is dubious at best.
• There are multiple levels that are bound to create some confusion
among new developers.
• CSS works differently in certain browsers like IE and Opera support
CSS as a different logic.
• There might be some cross-browser issues.
• After making changes, we also need to confirm the compatibility.
Aktivitas Mandiri dan Praktikum
Membuat 2 halaman web berdasarkan prototipe yang telah
dibuat dengan Figma, dengan ketentuan sbb.:
1. Halaman terdiri atas 2 dokumen HTML dan 1 dokumen CSS,
menggunakan metode external CSS sehingga 2 dokumen
HTML tersebut berbagi 1 dokumen CSS yang sama.
2. Tidak boleh menggunakan framework CSS apapun.
3. Source code semua dokumen dan screenshots halaman web
dikirim di LMS dan dicantumkan pada modul praktikum.
Sekian