HTML- Hypertext markup language
CSS- Cascading Style Sheet.
Javascript- The programming language used to create interactive and dynamic websites.
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the fundamental building blocks of the web. They are used to create and structure the content of a website and to control its layout and presentation, respectively.
<html>
<body>
<section>
Let's explore certain tags of HTML, and CSS, and explore their functionalities:
<html> - This is the root element of an HTML document. It contains all other elements on the page.
<head> - This element contains meta-information about the document, such as the title and link to CSS stylesheets.
<title> - This element specifies the title of the document, which is displayed in the browser's title bar or tab.
<body> - This element contains all the visible content of the document, such as text, images, and links.
<header> - This element represents a container for introductory content or a set of navigational links.
<nav> - This element represents a section of a page that contains navigation links.
<main> - This element represents the main content of a document.
<article> - This element represents a self-contained composition in a document, such as a blog post or forum post.
<section> - This element represents a thematic grouping of content, such as chapters in a book.
<aside> - This element represents content that is related to the main content, but can be considered separate from it.
<h1> - <h6> - These elements represent headings of different levels, from h1 (the most important) to h6 (the least important).
<p> - This element represents a paragraph of text.
<ul> - This element represents an unordered list of items, such as bullet points.
<ol> - This element represents an ordered list of items, such as numbered points.
<li> - This element represents a list item.
<a> - This element represents a hyperlink, which can be used to link to other pages or sections of the same page.
<img> - This element represents an image.
<div> - This element represents a container for HTML content, which can be used to group elements together for styling purposes.
<span> - This element represents a small piece of text, which can be used to apply styles to specific words or phrases.
<form> - This element represents a form that can be used to collect user input.
<input> - This element represents a form control, such as a text field, checkbox, or submit button.
<label> - This element represents a caption for a form control.
<select> - This element represents a drop-down list of options.
<option> - This element represents an option in a drop-down list.
<textarea> - This element represents a multi-line text input field.
<button> - This element represents a clickable button.
<table> - This element represents a table of data.
<thead> - This element represents the header of a table.
<tbody> - This element represents the body of a table.
<tr> - This element represents a row in a table.
I have used the 30 tags as described above in an exemplar representation of the code below where we can see the sample code and output.
Code Input:
<html>
<head>
<title>web2_basics</title>
</head>
<body>
<header>This is what header tag does to the text.</header>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<main>
<section>
<p>Paragraph tag in the main tag encapsulated by the section tag.</p>
</section>
<section>
<article>Sentence in the article tag encapsulated by the section tag.</article>
<aside>
text showing the effect of the aside tag. same section tag encapsulation as above
</aside>
</section>
<h1> Heading tag1</h1>
<h2> Heading tag2</h2>
<h3> Heading tag3</h3>
<h4> Heading tag4</h4>
<h5> Heading tag5</h5>
<h6> Heading tag6</h6>
<ul>
<li>item1(li tag encapsulated under ul)</li>
<li>item2(li tag encapsulated under ul)</li>
<li>item3(li tag encapsulated under ul)</li>
</ul>
<ol>
<li>asset1(li tag encapsulated under ol)</li>
<li>asset2(li tag encapsulated under ol)</li>
<li>asset3(li tag encapsulated under ol)</li>
</ol>
<a href>hyperlink- already used in navigation above.</a>
<img src="https://www.cnet.com/a/img/resize/c7cb26e927bebaa784fb55a01e71d7fecb15d2e3/hub/2019/06/26/3f76e99d-8055-46f3-8f27-558ee276b665/20180405-ibm-q-quantum-computer-02.jpg?auto=webp&fit=crop&height=675&width=1200" height="50%" width="50%" />
<div> A new division tag</div>
<select>
<option> option1.</option>
<option> option2.</option>
<option>option 3</option>
</select>
</main>
<form>
<input type="text"/>
<div>
<textarea></textarea> </div>
<button type="Submit">
</button>
</form>
<table>
<thead>table header</thead>
<tbody> table body
<tr><td>hello1</td><td>hello2</td></tr>
<tr><td>hello3</td><td>hello3</td></tr>
</tbody>
</table>
</body>
</html>
Code Output:
This is what header tag does to the text.
Paragraph tag in the main tag encapsulated by the section tag.
Sentence in the article tag encapsulated by the section tag.
text showing the effect of the aside tag. same section tag encapsulation as above
Heading tag1
Heading tag2
Heading tag3
Heading tag4
Heading tag5
Heading tag6
item1(li tag encapsulated under ul)
item2(li tag encapsulated under ul)
item3(li tag encapsulated under ul)
asset1(li tag encapsulated under ol)
asset2(li tag encapsulated under ol)
asset3(li tag encapsulated under ol)
hyperlink- already used in navigation above.
A new division tag
option1. option2. option 3
hello1 | hello2 |
hello3 | hello3 |
CSS:
CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language. It is most commonly used in conjunction with HTML and JavaScript to create visually appealing web pages.
One of the main benefits of using CSS is that it allows for the separation of the presentation of a document from its structure and content. This makes it possible to make global changes to the layout and design of a website by editing a single CSS file, rather than having to make changes to each individual HTML file.
CSS also provides a wide range of styling options, including the ability to change the font, color, spacing, and layout of elements on a web page. It also supports media queries, which allow for different styles to be applied based on the screen size and resolution of the device being used to view the website.
There are three ways to apply CSS to an HTML document: inline styles, internal stylesheets, and external stylesheets.
Inline styles are specified using the "style" attribute in individual HTML elements. This method is useful for applying unique styles to specific elements, but it can become difficult to maintain if the same styles are applied to multiple elements.
Internal stylesheets are specified using the "style" element within the "head" section of an HTML document. This method is useful for applying styles to multiple pages within a website, but it can become difficult to maintain as the number of styles and pages increases.
External stylesheets are specified using the "link" element within the "head" section of an HTML document, with the "href" attribute set to the location of the CSS file. This method is the most flexible, as the same CSS file can be used to style multiple pages and websites.
CSS also provides a wide range of selectors, which are used to select elements on a web page to which styles will be applied. Some common selectors include element selectors, class selectors, and ID selectors.
Element selectors are used to select elements based on their name, such as "p" for paragraphs or "h1" for headings. Class selectors are used to select elements based on their class attribute, and ID selectors are used to select elements based on their id attribute.
CSS also includes various layout and positioning techniques, such as the box model and the flexbox layout, which can be used to create complex and responsive web pages.
The box model is a layout method used to calculate the size and position of elements on a web page. It takes into account the size of an element's content, padding, borders, and margins.
The flexbox layout is a layout method used to create flexible and responsive web pages. It allows elements to be laid out in rows or columns, and elements can be stretched or shrunk to fill available space.
In conclusion, CSS is a powerful styling language that is essential for creating visually appealing and responsive web pages. It allows for the separation of presentation from structure and content, provides a wide range of styling options and layout techniques, and can be applied in a variety of ways. With the use of CSS, developers and designers can create beautiful and functional websites that meet the needs of their users.
- Changing the background color of a webpage:
CSS code:
Copy codebody {
background-color: #ff0000;
}
Output: The background color of the entire webpage will be set to red.
- Changing the font and text color of a heading:
CSS code:
Copy codeh1 {
font-family: Arial, sans-serif;
color: #0000ff;
}
Output: The font of all h1 headings on the webpage will be set to Arial and the text color will be set to blue.
- Creating a hover effect on a button:
CSS code:
Copy codebutton {
background-color: #ffa500;
color: #ffffff;
padding: 10px 20px;
border-radius: 5px;
}
button:hover {
background-color: #ff8c00;
cursor: pointer;
}
Output: When a user hovers over the button, the background color will change to a darker orange color and the cursor will change to a pointer.
- Creating a responsive navigation bar:
CSS code:
Copy codenav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000000;
color: #ffffff;
}
@media (max-width: 600px) {
nav {
flex-direction: column;
}
}
Output: The navigation bar will be displayed as a horizontal bar with items spaced evenly on larger screens. On screens smaller than 600px, the navigation bar will change to a vertical column.
- Creating a grid layout for a photo gallery:
CSS code:
Copy code.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.gallery img {
width: 100%;
}
Output: The photo gallery will be displayed as a grid with 3 columns and the images will take the full width of their grid cells, with a 10px gap between each cell.
Javascript:
JavaScript is a high-level, dynamic, and interpreted programming language that is widely used for creating interactive and dynamic web pages, as well as for creating desktop and mobile apps. It is the most popular programming language in the world, and it is supported by all major web browsers.
Here are some of the key features of JavaScript:
Dynamic and interpreted: JavaScript is an interpreted language, which means that the code is executed directly by the browser, without the need for a compiler. This makes it easy to write and test code in real-time, and it also makes it possible to dynamically change the content and behavior of a webpage.
Object-oriented: JavaScript is an object-oriented programming language, which means that it is based on the concept of objects, which have properties and methods. This allows for the creation of complex and modular code.
Event-driven: JavaScript is event-driven, which means that it can respond to user interactions, such as clicks, hover, and scroll events. This makes it possible to create interactive and dynamic web pages.
Functional programming: JavaScript also supports functional programming, which means that it can manipulate and operate on functions as first-class citizens, which allows for a more expressive, concise, and composable code.
Here are some examples of how JavaScript can be used in web development:
- Changing the content of a webpage:
JavaScript code:
Copy codedocument.getElementById("myHeading").innerHTML = "Hello, World!";
Output: The text of the element with the id "myHeading" will change to "Hello, World!".
- Adding and removing CSS classes:
JavaScript code:
Copy codedocument.getElementById("myButton").classList.add("active");
document.getElementById("myButton").classList.remove("active");
Output: The class "active" will be added to the element with the id "myButton", and then removed from the same element.
- Creating an interactive slideshow:
Copy codevar slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Output: This code creates a slideshow that allows the user to navigate through a series of images, with dots that indicate the current slide.
In conclusion, JavaScript is a powerful and versatile programming language that is essential for creating interactive and dynamic web pages. It can be used to manipulate the content and behavior of a webpage, to create interactive forms, responsive navigation bars, and validations. With the use of JavaScript, developers can create engaging and dynamic user experiences that meet the needs of their users.