Scribd
Upload
4 views

Basic HTML Tags

The document outlines basic HTML tags, including structural elements like <html>, <head>, and <body>, as well as form elements and tags for creating slideshows. It also details CSS properties categorized by their functions, such as text styling, box model, background, positioning, flexbox and grid, animations, and responsive design. Each section provides example values for better understanding and application.

Uploaded by

Winmazing
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Basic HTML Tags

The document outlines basic HTML tags, including structural elements like <html>, <head>, and <body>, as well as form elements and tags for creating slideshows. It also details CSS properties categorized by their functions, such as text styling, box model, background, positioning, flexbox and grid, animations, and responsive design. Each section provides example values for better understanding and application.

Uploaded by

Winmazing
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Basic HTML Tags

1. <html>: Defines the beginning and end of an HTML document.


2. <head>: Contains metadata about the document (e.g., title, styles, scripts).
3. <title>: Sets the title of the web page displayed on the browser tab.
4. <body>: Contains all the visible content of the web page.
5. <h1> to <h6>: Define headings, with <h1> being the largest and <h6> the smallest.
6. <p>: Defines a paragraph.
7. <a>: Creates a hyperlink.
8. <img>: Embeds an image.
9. <ul> / <ol> / <li>: Creates unordered lists, ordered lists, and list items.
10. <div>: Defines a division or section in a document for styling or grouping.

HTML for Forms

1. <form>: Creates an HTML form for user input.


2. <input>: Defines an input field, like text, radio buttons, or checkboxes.
3. <label>: Labels an input field for better accessibility.
4. <textarea>: Allows for multi-line text input.
5. <select> / <option>: Creates a dropdown list.

HTML for Slideshows

1. <div>: Used as a container for each slide.


2. <img>: Displays images within the slideshow.
3. <button>: Creates buttons for navigation (e.g., next/previous slide

Other Useful Tags

1. <span>: Inline container for styling a specific text or section.


2. <table> / <tr> / <td>: Defines a table, rows, and cells, respectively.
3. <style>: Embeds CSS directly into the document.
4. <script>: Embeds JavaScript code or links to an external script.
5. <footer>: Represents the footer section of a document.

Here are CSS properties and their meanings, categorized for clarity:

CSS Properties for Text


1. color: Sets the color of the text.
o Example value: red, #000000, rgb(255, 0, 0)
2. font-size: Defines the size of the text.
o Example value: 16px, 1.5em
3. font-family: Specifies the font of the text.
o Example value: "Arial", "Times New Roman"
4. font-weight: Determines the thickness of the text.
o Example value: normal, bold, 300
5. text-align: Aligns text horizontally.
o Example value: left, center, justify

CSS Properties for Box Model

1. margin: Creates space outside an element's border.


o Example value: 10px, auto
2. padding: Creates space between content and the border.
o Example value: 10px 15px
3. border: Sets the border around an element.
o Example value: 1px solid black
4. width / height: Sets the dimensions of an element.
o Example value: 100px, 50%

CSS for Background

1. background-color: Sets the background color of an element.


o Example value: blue, #f0f0f0
2. background-image: Adds an image as the background.
o Example value: url('image.jpg')
3. background-size: Controls the size of the background image.
o Example value: cover, contain

CSS for Positioning

1. position: Specifies how an element is positioned in a document.


o Example value: static, absolute, fixed
2. top / left / right / bottom: Moves the element relative to its position.
o Example value: 10px, 5%
3. z-index: Defines the stack order of elements.
o Example value: 1, 10

CSS for Flexbox and Grid

1. display: Defines the layout model of an element.


o Example value: flex, grid, block, inline
2. justify-content: Aligns items horizontally in a flex or grid container.
o Example value: center, space-between
3. align-items: Aligns items vertically in a flex or grid container.
o Example value: flex-start, stretch

CSS Animations and Transitions

1. transition: Adds a smooth change between property values.


o Example value: all 0.3s ease
2. animation: Defines keyframe animations for an element.
o Example value: slideIn 2s infinite

CSS for Responsive Design

1. @media: Adds rules for specific screen sizes.


o Example: @media (max-width: 600px)
2. max-width: Sets the maximum width of an element.
o Example value: 1200px

You might also like