Telkom University
  • Oct 02
  • 2024

Build your own digital world: Basic Guide to HTML and CSS

Have you ever been curious about how a website can be so interesting and interactive? Behind the stunning appearance, there is a programming language that works together to create digital wonders. The two most basic languages ​​and you must master are HTML and CSS.

What is HTML and CSS?

HTML (Hypertext Markup Language) is the language used to create the basic structure of a web page. Imagine HTML like the framework of a house, which determines the location of the room, door and window. With HTML, we can create titles, paragraphs, images, links, and other elements on the web page.

CSS (Cascading Style Sheets) serves to enhance the appearance of web pages that have been created with HTML. If HTML is a house frame, then CSS is paint, furniture, and decorations that make the house look attractive. With CSS, we can adjust the color, font, size, layout, and other visual effects on HTML elements.

Why do you have to learn HTML and CSS?

  • Creating your own website: You can realize your creative ideas into a personal website, portfolio, or even online business.
  • Understanding the basics of Web Development: HTML and CSS are strong foundations for learning other web programming languages ​​such as Javascript.
  • Display customization: You can design a website according to your tastes and needs without having to depend on the finished template.
  • Improve skills: Learning HTML and CSS will practice your thinking logic and problem solving skills.

From where?

  1. Text Editor: Select Text Editor that matches your preferences. Some popular choices are Visual Studio Code, Sublime Text, or Atom.
  2. Browser: Every code change that you make will immediately be seen in the browser. Google Chrome, Mozilla Firefox, and Microsoft Edge are a good choice.
  3. Learn the basics of HTML:
    • Basic Structure: Learn HTML tags such as , , ,

      ,

      ,

      , , and others.
    • Attributes: Understand how to add attributes to tags to provide additional information, for example SRC for images, Href for links, and ID for identification.
  4. Know CSS:
    • Selector: Learn how to choose the HTML element that you want to styling using selectors such as tags, IDs, and classes.
    • Property and Value: Each CSS property has different values, for example color to adjust the color, fonts to adjust the font size, and background-color to adjust the background color.
  5. Practice: Try making a simple web page and keep practicing. The more often you practice, the more proficient you will be.

HTML (Hypertext Markup Language): Website spine

As we have discussed, HTML is the language used to create the basic structure of a web page. Imagine HTML like a building framework. Each element in HTML is represented by the tag, which begins with a elbow brackets (<) and ends with a elbow brackets (>) such as , , .

Important html tags:

  • : Opening and closing tags for all HTML documents.
  • : The head of the document, contains information about pages such as the title, meta data, and links to the CSS file.
  • : Document body parts, containing content that will be displayed on the page.

  • until
    : Tags to make titles with various levels of interest.

  • : Tag to make paragraphs.
  • : Tag to insert images.
  • : Tag to make a link.
    And
    : Tags to make a list not numbered and numbered.
  • :
     Tag to create a table.
  • :
     Tags to divide content into smaller parts.

Attribute:

The attribute provides additional information about an element. SRC attributes on the tag used to determine the image source, while the Href on the tag used to determine the purpose of the link.

CSS (Cascading Style Sheets): Decoration that makes websites interesting

CSS is used to adjust the appearance of HTML elements. With CSS, you can change the color, size, font, layout, and many more visual aspects of your web page.

How CSS works:

  1. Selector: This section is used to select the HTML element that you want to style.
  2. Property: This section determines the aspects you want to change (for example, color, font size).
  3. Value: This section determines the value for the property.

Important concepts in CSS:

  • Specificity: Determine which style will be applied if there are some conflicting styles.
  • Inheritance: The force of the parent element can be inherited to the child element.
  • Box Model: Each HTML element is considered as a box that has margin, border, padding, and content.
  • Layout: How to set the position of elements on the page using techniques such as float, position, and flexbox.

Best Practice:

  • Semantics HTML: Use HTML tags according to semantics, so that search engines and users can more easily understand the structure of web pages.
  • External CSS: Place the CSS code in a separate file (for example, Style.css) to maintain the neatness of the code and facilitate management.
  • Responsive Design: Create a website that can adjust the appearance to various screen sizes.
  • Validation: Make sure your HTML and CSS code is valid using an online validator.

From where?

  • Learn the basics: Understand the basic concepts of HTML and CSS as a whole.
  • Practice: Create a small project to hone your abilities.
  • Reference: Take advantage of various learning resources such as online tutorials, books, and communities.
  • Experiment: Don't be afraid to try new things and see the results.

A simple example:

The HTML code above will create a page with the title "My First Page" and a paragraph. While the CSS code will make the background of the pages light blue and the title is white and is in the middle of the page.

Effective Learning Tips:

  • Learn gradually: Starting from the most basic and not in a hurry.
  • Many practice: The practice of making small projects is the best way to hone your abilities.
  • Find References: There are many tutorials, courses, and online communities that you can use.
  • Don't be afraid to try: experiment with different codes and see the results.

Want to study further?

  • Framework CSS: Learn frameworks such as bootstrap to accelerate website development.
  • Preprocessor CSS: Use Preprocessor like Sass or Less to make CSS that is more modular and efficient.
  • Javascript: Add interactivity to your web page with javascript.

Conclusion

HTML and CSS are very important programming languages ​​for building websites and strong foundations to build websites. With a good understanding of these two languages, you will be able to create an interesting, informative and functional web page. With a good understanding of these two languages, you will be able to create an interesting and informative web page. So, what are you waiting for? Start your adventure in the world of web development right now!

Also visit our website for some other interesting aricles https://bie.telkomuniversity.ac.id/