HTML (HyperText Markup Language)
The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. It describes the structure of Web pages. HTML gives authors the means to:
Publish online documents with headings, text, tables, lists, photos, etc. Retrieve online information via hypertext links, at the click of a button.
HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.
HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets. Tags such as and directly introduce content into the page. Other tags such as
surround and provide information about document text and may include other tags as sub-elements.
Browsers do not display the HTML tags, but use them to interpret the content of the page.
Explaining the HTML skeleton(document)
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The < html > element is the root element of an HTML page
The < head > element contains meta information about the HTML page
The < title > element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The < body > element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The < h1 > element defines a large heading, the < p > element defines a paragraph.
HTML Elements
The HTML element is everything from the start tag to the end tag:
< tag-name >Content goes here...</ tag-name >
Examples of some HTML elements:
< h1 >My First Heading</ h1 >
< p >My first paragraph.</ p >
HTML Attributes
All HTML elements can have attributes. Attributes provide additional information about elements .
Attributes are always specified in the start tag .They usually come in name/value pairs like: name="value" .
HTML Headings
HTML headings are defined with the < h1 > to < h6 > tags.
< h1 > defines the most important heading.
< h6 > defines the least important heading. It is important to use headings to show the document structure.
< h1 > headings should be used for main headings, followed by < h2 > headings, then the less important < h3 >, and so on.
HTML Formatting Elements
< p >< b > I will be bold </ b >< /p >
- < b > - Bold text
- < strong > - Important text
- < i > - Italic text
- < em > - Emphasised text
- < mark > - Marked text
- < small > - Smaller text
- < del > - Deleted text
- < ins > - Inserted text
- < sub > - Subscript text
- < sup > - Superscript text
HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML source code.
Example
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
Note: Comments are not displayed by the browser, but they can help document your HTML source code..
CSS (Cascading Style Sheets)
CSS stands for Cascading Style Sheets. Basically, CSS is a language that manages the design and presentation of web pages the way things look. It works together with HTML, which handles the content of web pages.
With CSS you can create rules to tell your website how you want it to display information. And you can keep the commands for the style stuff - fonts, colors, and so on - separate from the commands for the content.
They’re called “cascading” because you can have multiple style sheets, with one style sheet inheriting properties (or “cascading”) from others.
For a lot of people a plain old blog template is good enough. It’s only when you want to start customising the look of a site that you need to delve into CSS.
Three Style Sheets
There are three kinds of CSS style sheets: external, internal, and inline.
External styles control how things look across many pages on a website.
Internal styles control the look of just one page.
Inline styles control just one element of a single page, even just a single word.
CSS SYNTAX
h1 { color :red;}
selector declaration
- A CSS rule consists of a selector and a declaration block.
- The selector points to the HTML element you want to style.”
- The declaration block contains one or “more declarations separated by semicolons.
- Each declaration includes a CSS property name and a value separated by a colon.
- Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
CSS COMENTS
CSS comments are not displayed in the browser, but they can help document your code.
They are used to explain the code at a later date.
It works the same way as the HTML comment but looks different /* my code */
CSS BOX MODEL
The box model is used when talking about design and layout.
It is essentially the box that wraps around every HTML element, consisting of margins, borders, padding and the actual content.
Let’s explain the different parts.
Content - The content of the box, where the text and images appear.
Padding - Clears an area around the content. The padding is transparent.
Border - A border that goes around the padding and content.
Margin - Clears an area outside the border. The margin is also transparent.
The box model allows one to add a border around elements, and to define space between elements.
I can't show everything here but you could checkout W3Schools, CSS Tricks,Cascading Stylesheets MDN and freeCodeCamp to learn more
Top comments (0)