Name: Towards AI
Legal Name: Towards AI, Inc.
Description: Towards AI is the world's leading artificial intelligence (AI) and technology publication. Read by thought-leaders and decision-makers around the world.
Phone Number: +1-650-246-9381
Email: pub@towardsai.net
228 Park Avenue SouthNew York,
NY10003United States
Name: Towards AI
Legal Name: Towards AI, Inc.
Description: Towards AI is the world's leading artificial intelligence (AI) and technology publication.
Founders:
Roberto Iriondo,
Website,
Job Title: Co-founder and Advisor
Works for: Towards AI, Inc.
Follow Roberto:
X,
LinkedIn,
GitHub,
Google Scholar,
Towards AI Profile,
Medium,
ML@CMU,
FreeCodeCamp,
Crunchbase,
Bloomberg,
Roberto Iriondo, Generative AI Lab,
Generative AI LabDenis Piffaretti,
Job Title: Co-founder
Works for: Towards AI, Inc.Louie Peters,
Job Title: Co-founder
Works for: Towards AI, Inc.Louis-François Bouchard,
Job Title: Co-founder
Works for: Towards AI, Inc.
Cover:
Logo:
Areas Served: Worldwide
Alternate Name: Towards AI, Inc.
Alternate Name: Towards AI Co.
Alternate Name: towards ai
Alternate Name: towardsai
Alternate Name: towards.ai
Alternate Name: tai
Alternate Name: toward ai
Alternate Name: toward.ai
Alternate Name: Towards AI, Inc.
Alternate Name: towardsai.net
Alternate Name: pub.towardsai.net
This article contains essential information about some of the fundamentals of HTML and CSS.
Tags, Head tag, Inserting Stylesheet
Relative Path, Elements, Units
Preserving white space, Span, Opacity
Hypertext Reference, Source, Target
By the next article, you will be able to design a static responsive website and understand any front-end code of the website. These articles contain information based on the function of the elements because so many things are similar in HTML & CSS.
Motivation
Nowadays, web development plays a vital role in our daily lives, and everyone needs a website. Websites are used by the people to display a portfolio, interact with the people, integrate with the ML models, portrait the idea of the project, etc.
My motto is to say that It is not necessary to learn the complete web development unless you want to become a front end web developer. But, Everybody needs websites in daily life. So, It is okay to get the website code from the internet and makes changes as you like on the website, or you can design a website based on the time you have because time is precious and doesn’t waste it by working on the things which you don’t like.
Introduction
HTML stands for HyperText Markup Language. Hypertext refers to the hyperlinks that a page can contain, and Markup Language refers to the style of writing the scripts in the form of tags( ) in which the alignment and content of the webpage are completely based on tags. HTML is a case -insensitive language.
CSS stands for Cascading Stylesheets. It is used to style the webpage and describe the content and layout of the webpage. The main purpose of CSS is to present the website effectively. If several webpages have a similar type of styling, then CSS is helpful to define the styles, and it is linked to all the webpages. The entire CSS is referring to the content and defining the styles for the respective content. CSS is a case -insensitive language except for selector names such as class names and id names.
Bootstrap is an open-source framework that contains HTML, CSS, Javascript for designing responsive web pages based on the size of the screen, especially for mobile phones. The complete external source code is available in Bootstrap for every component of the webpage. It is recommended to use Bootstrap to design a website. Because it saves a lot of time provided you are not a beginner.
Getting Started
Tags
Tag is a basic word that represents the structure of the HTML Document. If the Element contains extra content, then it must have an opening tag at the start and closing tag at the end.
E.g.:
Heading
paragraph
A self-closing tag is a void element that does not strictly need any closing tag. Because it doesn’t have content. It is not mandatory to put ‘/’ character at the end of the tag.
E.g.:
Head tag
The Head tag is a container of Metadata. The content in the Head tag does not display in the Browser. The main purpose of the Head tag is to define the document title, character set, styles, scripts, etc. Metadata is referred by browsers and search engines when you browse about the particular HTML page.
Basic Structure of HTML Page
Inserting Stylesheet
There are three ways to insert a CSS file into the HTML file:
External CSS
Internal CSS
Inline styles
Using external CSS stylesheets:
In this, an external CSS file is linked to the HTML document with the help of a link tag inside the head tag. It is always recommended to use external stylesheet linking. We can make changes in the CSS file easily without disturbing the primary HTML file. This leads to faster loading of the website.
Using internal CSS stylesheets:
The name itself defines writing the CSS code inside the HTML page. The content of CSS is written in a style tag that is inside the body tag. There is no extra sheet required for styling the webpage. This can also be called Embedded styling.
Using inline styles:
The style attribute is used inside the HTML element. All the CSS properties can be included in the style attribute in a serial format. The style attribute assigns the corresponding CSS properties to the HTML element. The priority of the Style attribute is very high compared to internal and external styles.
The path of a certain file corresponding to the current position of the file is called the Relative path. Many people mess up to link one page to another page. But, It is easy if we understand the levels.
../ is to go back to a level(lower level)
[Folder_name]/ is to go into the specified folder(upper level)
Follow red ellipses for easy understanding.
In the above picture, all the elements are at the same level. To get an image that is in the images folder into an HTML file(index.html), You should move one level up. Use the command:
images/about.jpg
If the image is in the Downloads folder, which you need to get it into the same HTML file(index.html).
Go three levels back till you reach This PC Folder and go into the Downloads folder where you find the about (2) image. Use the command:
../../../Downloads/about (2).jpg
Elements
A tag with its content is called Element. Ex:
tag,
tag etc. Some of the elements do not have content such as , ,
syntax of the HTML element is
content
There are two types of HTML elements:
Block-level Element:
A block-level element always starts with a sperate line that occupies a block area with a complete width of the webpage and required height according to the content and ends with a line break.
Inline Element:
An inline element does not take separate space. The content in the inline Element is continued along with the flow and takes the necessary width without breaking the line.
Units (px,em,%)
Length is used in almost all the CSS properties such as Width, Height, Margin, Border, Padding, etc.
px- pixel (1px = 1/96th of 1inch)
cm-centimeter (1cm = 96px/2.54)
mm-millimeter (1mm = 1/10th of 1cm)
em- Size of the relative element to the font-size of the element
%- Percentage of relative element to the parent element in length
Px, cm, and mm are absolute or static length units — because those sizes do not depend on the size of the viewport. Em & % are dynamic or relative length units because those sizes depend on the size of the viewport.
Preserving white space
This is a technique that preserves the spaces(more than one space), tabs, line breaks, etc. It can be achieved by using a pre tag(
) that is a block of preformatted text, which displays the content as it is including the white spacing.
But, In a paragraph tag(
), it only displays the characters and a single space character without considering the white space in between the content.
Non-breaking space ( ) is an entity in HTML that does not break into a new line, and the webpage treats it as a single space. It can be used to achieve multiple numbers of spaces in the paragraph tag.
Span
The span tag is an inline element that is used to highlight it’s content from others.
Opacity
The opacity describes the transparency of the Element in the range of 0 to 1(invisible to completely visible). By decreasing the value of opacity, the Element is whitened. It is mostly used in the hovering effect of the elements.
opacity levels (invisible -> visible)
Hypertext Reference ( href)
Hypertext reference is an attribute. The name itself says that it refers to the Hypertext. The purpose of href attribute is to provide links from one page to another page. Always an anchor tag < a > contains this attribute. It has two parts. which are,
Anchor text:- The visible text that represents the link and also it is clickable.
URL:- The invisible part which directs you to the other location.
The href attribute refers to different types of URLs.
Absolute URL:- Complete link of the File
Relative URL:- The file’s position based on the current HTML file which you are typing
Section of the webpage:- It refers to other sections on the same webpage using selectors.
Other functions:- It refers to a Telephone number, Mail ID, etc.
Source ( src )
The source is an attribute and also a self-closing tag that defines the path of an external resource such as image, video, audio, iframe, etc. The value of this attribute is an URL that can be the relative or absolute path of the resource.
Target
Target is an attribute that determines the location of the external resource to open after clicking the link. The external resource opens based on the value of the target attribute. Those are,
_blank:- opens the linked resource in a new window (or) tab.
_self:- opens the linked resource in the same frame ( default ).
_parent:- opens the linked resource in the parent frame.
_top:- opens the linked resource in the full body of the window.
In the next article, I will write about the remaining basics of CSS and the fundamentals of Bootstrap.
I hope you enjoy the article and correct me if anything is wrong in the article! 🤝🤝🤝
Established in Pittsburgh, Pennsylvania, US — Towards AI Co. is the world’s leading AI and technology publication focused on diversity, equity, and inclusion. We aim to publish unbiased AI and technology-related articles and be an impartial source of information. Read by thought-leaders and decision-makers around the world. We have thousands of contributing writers from university professors, researchers, graduate students, industry experts, and enthusiasts. We receive millions of visits per year, have several thousands of followers across social media, and thousands of subscribers. All of our articles are from their respective authors and may not reflect the views of Towards AI Co., its editors, or its other writers. | Information for authors → https://contribute.towardsai.net | Terms → https://towardsai.net/terms/ | Privacy → https://towardsai.net/privacy/ | Members → https://members.towardsai.net/ | Shop → https://ws.towardsai.net/shop | Is your company interested in working with Towards AI? → https://sponsors.towardsai.net
`;
} else {
console.error('Element with id="subscribe" not found within the page with class "home".');
}
}
});
// Remove duplicate text from articles
/* Backup: 09/11/24
function removeDuplicateText() {
const elements = document.querySelectorAll('h1, h2, h3, h4, h5, strong'); // Select the desired elements
const seenTexts = new Set(); // A set to keep track of seen texts
const tagCounters = {}; // Object to track instances of each tag
elements.forEach(el => {
const tagName = el.tagName.toLowerCase(); // Get the tag name (e.g., 'h1', 'h2', etc.)
// Initialize a counter for each tag if not already done
if (!tagCounters[tagName]) {
tagCounters[tagName] = 0;
}
// Only process the first 10 elements of each tag type
if (tagCounters[tagName] >= 2) {
return; // Skip if the number of elements exceeds 10
}
const text = el.textContent.trim(); // Get the text content
const words = text.split(/\s+/); // Split the text into words
if (words.length >= 4) { // Ensure at least 4 words
const significantPart = words.slice(0, 5).join(' '); // Get first 5 words for matching
// Check if the text (not the tag) has been seen before
if (seenTexts.has(significantPart)) {
// console.log('Duplicate found, removing:', el); // Log duplicate
el.remove(); // Remove duplicate element
} else {
seenTexts.add(significantPart); // Add the text to the set
}
}
tagCounters[tagName]++; // Increment the counter for this tag
});
}
removeDuplicateText();
*/
// Remove duplicate text from articles
function removeDuplicateText() {
const elements = document.querySelectorAll('h1, h2, h3, h4, h5, strong'); // Select the desired elements
const seenTexts = new Set(); // A set to keep track of seen texts
const tagCounters = {}; // Object to track instances of each tag
// List of classes to be excluded
const excludedClasses = ['medium-author', 'post-widget-title'];
elements.forEach(el => {
// Skip elements with any of the excluded classes
if (excludedClasses.some(cls => el.classList.contains(cls))) {
return; // Skip this element if it has any of the excluded classes
}
const tagName = el.tagName.toLowerCase(); // Get the tag name (e.g., 'h1', 'h2', etc.)
// Initialize a counter for each tag if not already done
if (!tagCounters[tagName]) {
tagCounters[tagName] = 0;
}
// Only process the first 10 elements of each tag type
if (tagCounters[tagName] >= 10) {
return; // Skip if the number of elements exceeds 10
}
const text = el.textContent.trim(); // Get the text content
const words = text.split(/\s+/); // Split the text into words
if (words.length >= 4) { // Ensure at least 4 words
const significantPart = words.slice(0, 5).join(' '); // Get first 5 words for matching
// Check if the text (not the tag) has been seen before
if (seenTexts.has(significantPart)) {
// console.log('Duplicate found, removing:', el); // Log duplicate
el.remove(); // Remove duplicate element
} else {
seenTexts.add(significantPart); // Add the text to the set
}
}
tagCounters[tagName]++; // Increment the counter for this tag
});
}
removeDuplicateText();
//Remove unnecessary text in blog excerpts
document.querySelectorAll('.blog p').forEach(function(paragraph) {
// Replace the unwanted text pattern for each paragraph
paragraph.innerHTML = paragraph.innerHTML
.replace(/Author\(s\): [\w\s]+ Originally published on Towards AI\.?/g, '') // Removes 'Author(s): XYZ Originally published on Towards AI'
.replace(/This member-only story is on us\. Upgrade to access all of Medium\./g, ''); // Removes 'This member-only story...'
});
//Load ionic icons and cache them
if ('localStorage' in window && window['localStorage'] !== null) {
const cssLink = 'https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css';
const storedCss = localStorage.getItem('ionicons');
if (storedCss) {
loadCSS(storedCss);
} else {
fetch(cssLink).then(response => response.text()).then(css => {
localStorage.setItem('ionicons', css);
loadCSS(css);
});
}
}
function loadCSS(css) {
const style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
}
//Remove elements from imported content automatically
function removeStrongFromHeadings() {
const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6, span');
elements.forEach(el => {
const strongTags = el.querySelectorAll('strong');
strongTags.forEach(strongTag => {
while (strongTag.firstChild) {
strongTag.parentNode.insertBefore(strongTag.firstChild, strongTag);
}
strongTag.remove();
});
});
}
removeStrongFromHeadings();
"use strict";
window.onload = () => {
/*
//This is an object for each category of subjects and in that there are kewords and link to the keywods
let keywordsAndLinks = {
//you can add more categories and define their keywords and add a link
ds: {
keywords: [
//you can add more keywords here they are detected and replaced with achor tag automatically
'data science',
'Data science',
'Data Science',
'data Science',
'DATA SCIENCE',
],
//we will replace the linktext with the keyword later on in the code
//you can easily change links for each category here
//(include class="ml-link" and linktext)
link: 'linktext',
},
ml: {
keywords: [
//Add more keywords
'machine learning',
'Machine learning',
'Machine Learning',
'machine Learning',
'MACHINE LEARNING',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
ai: {
keywords: [
'artificial intelligence',
'Artificial intelligence',
'Artificial Intelligence',
'artificial Intelligence',
'ARTIFICIAL INTELLIGENCE',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
nl: {
keywords: [
'NLP',
'nlp',
'natural language processing',
'Natural Language Processing',
'NATURAL LANGUAGE PROCESSING',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
des: {
keywords: [
'data engineering services',
'Data Engineering Services',
'DATA ENGINEERING SERVICES',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
td: {
keywords: [
'training data',
'Training Data',
'training Data',
'TRAINING DATA',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
ias: {
keywords: [
'image annotation services',
'Image annotation services',
'image Annotation services',
'image annotation Services',
'Image Annotation Services',
'IMAGE ANNOTATION SERVICES',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
l: {
keywords: [
'labeling',
'labelling',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
pbp: {
keywords: [
'previous blog posts',
'previous blog post',
'latest',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
mlc: {
keywords: [
'machine learning course',
'machine learning class',
],
//Change your article link (include class="ml-link" and linktext)
link: 'linktext',
},
};
//Articles to skip
let articleIdsToSkip = ['post-2651', 'post-3414', 'post-3540'];
//keyword with its related achortag is recieved here along with article id
function searchAndReplace(keyword, anchorTag, articleId) {
//selects the h3 h4 and p tags that are inside of the article
let content = document.querySelector(`#${articleId} .entry-content`);
//replaces the "linktext" in achor tag with the keyword that will be searched and replaced
let newLink = anchorTag.replace('linktext', keyword);
//regular expression to search keyword
var re = new RegExp('(' + keyword + ')', 'g');
//this replaces the keywords in h3 h4 and p tags content with achor tag
content.innerHTML = content.innerHTML.replace(re, newLink);
}
function articleFilter(keyword, anchorTag) {
//gets all the articles
var articles = document.querySelectorAll('article');
//if its zero or less then there are no articles
if (articles.length > 0) {
for (let x = 0; x < articles.length; x++) {
//articles to skip is an array in which there are ids of articles which should not get effected
//if the current article's id is also in that array then do not call search and replace with its data
if (!articleIdsToSkip.includes(articles[x].id)) {
//search and replace is called on articles which should get effected
searchAndReplace(keyword, anchorTag, articles[x].id, key);
} else {
console.log(
`Cannot replace the keywords in article with id ${articles[x].id}`
);
}
}
} else {
console.log('No articles found.');
}
}
let key; //not part of script, added
for (key in keywordsAndLinks) {
//key is the object in keywords and links object i.e ds, ml, ai
for (let i = 0; i < keywordsAndLinks[key].keywords.length; i++) {
//keywordsAndLinks[key].keywords is the array of keywords for key (ds, ml, ai)
//keywordsAndLinks[key].keywords[i] is the keyword and keywordsAndLinks[key].link is the link
//keyword and link is sent to searchreplace where it is then replaced using regular expression and replace function
articleFilter(
keywordsAndLinks[key].keywords[i],
keywordsAndLinks[key].link
);
}
}
function cleanLinks() {
// (making smal functions is for DRY) this function gets the links and only keeps the first 2 and from the rest removes the anchor tag and replaces it with its text
function removeLinks(links) {
if (links.length > 1) {
for (let i = 2; i < links.length; i++) {
links[i].outerHTML = links[i].textContent;
}
}
}
//arrays which will contain all the achor tags found with the class (ds-link, ml-link, ailink) in each article inserted using search and replace
let dslinks;
let mllinks;
let ailinks;
let nllinks;
let deslinks;
let tdlinks;
let iaslinks;
let llinks;
let pbplinks;
let mlclinks;
const content = document.querySelectorAll('article'); //all articles
content.forEach((c) => {
//to skip the articles with specific ids
if (!articleIdsToSkip.includes(c.id)) {
//getting all the anchor tags in each article one by one
dslinks = document.querySelectorAll(`#${c.id} .entry-content a.ds-link`);
mllinks = document.querySelectorAll(`#${c.id} .entry-content a.ml-link`);
ailinks = document.querySelectorAll(`#${c.id} .entry-content a.ai-link`);
nllinks = document.querySelectorAll(`#${c.id} .entry-content a.ntrl-link`);
deslinks = document.querySelectorAll(`#${c.id} .entry-content a.des-link`);
tdlinks = document.querySelectorAll(`#${c.id} .entry-content a.td-link`);
iaslinks = document.querySelectorAll(`#${c.id} .entry-content a.ias-link`);
mlclinks = document.querySelectorAll(`#${c.id} .entry-content a.mlc-link`);
llinks = document.querySelectorAll(`#${c.id} .entry-content a.l-link`);
pbplinks = document.querySelectorAll(`#${c.id} .entry-content a.pbp-link`);
//sending the anchor tags list of each article one by one to remove extra anchor tags
removeLinks(dslinks);
removeLinks(mllinks);
removeLinks(ailinks);
removeLinks(nllinks);
removeLinks(deslinks);
removeLinks(tdlinks);
removeLinks(iaslinks);
removeLinks(mlclinks);
removeLinks(llinks);
removeLinks(pbplinks);
}
});
}
//To remove extra achor tags of each category (ds, ml, ai) and only have 2 of each category per article
cleanLinks();
*/
//Recommended Articles
var ctaLinks = [
/*
' ' +
'
Towards AI has published Building LLMs for Production—our 470+ page guide to mastering LLMs with practical projects and expert insights!
' +
'' +
'' +
'' +
'
Note: Content contains the views of the contributing authors and not Towards AI. Disclosure: This website may contain sponsored content and affiliate links.
Towards AI has built a jobs board tailored specifically to Machine Learning and Data Science Jobs and Skills. Our software searches for live AI jobs each hour, labels and categorises them and makes them easily searchable. Explore over 10,000 live jobs today with Towards AI Jobs!
Join thousands of data leaders on the AI newsletter. It’s free, we don’t spam, and we never share your email address. Keep up to date with the latest work in AI. From research to projects and ideas. If you are building an AI startup, an AI-related product, or a service, we invite you to consider becoming a sponsor.
