Please enable JavaScript.
Coggle requires JavaScript to display documents.
Webpage Designing in HTML - Coggle Diagram
Webpage Designing in HTML
Empty elements
Empty elements are the ones who don't have the end tag> eg. <br>
HTML - Hyper Text Markup Language
CSS - Casacading Style Sheets
CSS- Meaning - is used to format the layout of the webpage.
File extension - .htm,.html
Html Editors- Notepad, Wordpad, Notepad++ etc.
Container elements
Container elements are the one who have both open< and close tag> eg. <p> and <b>
Nested Tags
It means that when there are multiple tags, the last tag opened should be the first tag closed eg. <p><b>this is an example of nested tag </b></p>
Tag Attributes
When a webpage has multiple elements at that time attributes come to help eg. If href attribute is enclosed in a tag it helps the browser to tell the url of the page.
Html Tags
<h1> to <h6>
Defines header 1 to header 6
<p>
Defines a paragraph
<br>
It is a single line break
<body>
The visible part which is visible on the webpage
<html>
Defines HTML document .
<hr>
Defines a horizontal rule.
<!--->
Define a comment
Types in which CSS can be added to a HTML document
Inline CSS
It applies a unique style to a single html element. eg. If we want to color h1 as red and h2 as blue then we need to write them separately.
External CSS
We can use a <link> element to add an external CSS file
Internal CSS
The style is applied to a single HTML page. If we apply a certain property it will get applied to the page. eg. <style>
<background color: powderblue>
</style>
CSS Properties
CSS font size
CSS Font family
CSS Color
CSS Border
CSS Background color
CSS Text Align
CSS Margin
HTML Lists
List item <li> tag defines list item. eg. <li>tomato</li>
ordered list<ol>
Has numbers, alphabets, romans, lower case and upper case.
unordered list<ul>
Displayed with bullet points
CSS List Properties
Item markeres for ordered list
Item markers for unordered list
image as list item marker
Position of list item marker
Nesting List
It is a list within a list eg. <li>Fruits<ul><li>mango</li><li>tomato</li></ul></li>
Target attribute
_self
opens in the same window
_parent
opens in parent frame
_blank
opens in a new window
_top
opens in full body of window
EMAIL Adreess
We use mailto: in href attribute.