Let's learn about HTML.
\n\t\n" }, { "type": "heading", "level": "4", "text": "Tags used:" }, { "type": "list", "items": [ "<!DOCTYPE html> is used to declare the document as an HTML5 document", "<html> A root element of an HTML page is <html>", "<title> is the element used to display the title on the browser’s title bar for an HTML document", "<body> This tag contains all visible elements like headings, paragraphs, images etc. It is the body of the HTML page which contains all the visible content for the HTML document that makes a webpage." ] }, { "type": "heading", "level": "4", "text": "HTML Element:" }, { "type": "paragraph", "text": "An html element starts with an opening tag, some content and a closing tag." }, { "type": "list", "items": [ "The opening tag consists of the element's name enclosed in angle brackets. It marks the beginning of the element and where its effects take place.", "A closing tag is the same as an opening tag except a forward slash precedes the element name. It marks the end of the element and stops its effects.", "The content refers to what’s inside the element, which could be text, other elements, or a mix of both." ] }, { "type": "textarea", "text": "\n\tThis is a paragraph.\n
" }, { "type": "heading", "level": "4", "text": "What are HTML Attributes?" }, { "type": "paragraph", "text": "HTML elements may include attributes to provide extra information regarding an element. Attributes are included in the opening tag and have the name-value format. HTML attributes are typically optional but can add useful information to elements." }, { "type": "textarea", "text": "Visit Webcooks" }, { "type": "heading", "level": "4", "text": "HTML Features:" }, { "type": "paragraph", "text": "HTML is a text-based language used to build web pages. It has several important features that make it popular for web development:" }, { "type": "list", "items": [ "Standard Language: HTML is the standard for creating and structuring web pages.It uses elements like headings, paragraphs, lists, and tables to mark up the content.", "Supports Multimedia: HTML supports text, images, audio, and video; all of them create web pages rich, interactive, and exciting.", "Works with Other Technologies: HTML can be combined with CSS for their styling and JavaScript for adding more functionality to web pages.", "Browser Compatibility: Web pages created with HTML can be viewed on any browser or device, making it highly versatile.", "Constantly Evolving: HTML is an open standard, regularly updated by developers to improve and add new features." ] }, { "type": "heading", "level": "4", "text": "Cons of HTML: " }, { "type": "paragraph", "text": "Here are some disadvantages of using HTML:" }, { "type": "list", "items": [ "Text-Based: HTML is a text-based language, which can sometimes make it difficult to read and write code.", "Limited for Complex Tasks: HTML alone isn’t powerful enough to handle advanced features and interactivity in modern web pages.", "Challenging to Maintain: As websites grow larger, maintaining and updating HTML code can become more difficult." ] } ] }, { "title": "HTML Comments", "description": "HTML comments - add notes or explanations that are not displayed by the browser, and therefore invisible to users. These comments are helpful for developers to explain parts of the code, organize the structure, or leave reminders.", "sub_description": "Also can be used to temporarily hide content like heading tags from being displayed.This way, the code remains visible to the developer, but the content is hidden from users.", "additional_info": "Comments can span across multiple lines for detailed explanations.tag defines paragraphs in web pages. As it is a block-level element, the paragraph will always start a line. This ensures that text within a <p> tag is separated from other elements on the page, creating a clear and organized structure.", "sub_description": "One of the useful features of HTML paragraphs is that they automatically remove any extra spaces or blank lines between words or sentences. This ensures that the text remains clean and properly formatted without manual adjustments.", "additional_info": "Overall, the <p> tag is essential for organizing content into readable sections, enhancing the structure and appearance of web pages.", "content": [ { "type": "textarea", "text": "
This is a paragraph.
\nThis is second paragraph.
" } ] }, { "title": "HTML Styles", "description": "The style attribute is used to apply inline styling to an HTML element, allowing you to customize its appearance directly. This attribute can control various visual properties such as text color, font size, background color, and more.", "sub_description": "For example, the style attribute can be used to change the color of text, adjust the font-size, or set a specific background-color for an element. ", "additional_info": "The style attribute allows you to quickly add CSS styling to individual elements without creating a separate stylesheet, offering flexibility in how content is presented. However, for larger projects, it's typically better to use external or internal stylesheets for easier maintenance.", "content": [ { "type": "textarea", "text": "This is a paragraph
" }, { "type": "heading", "level": "2", "text": "Color property: " }, { "type": "paragraph", "text": "In HTML, color attribute in style attribute is used to declare the color of the text inside an element. You can apply any color by specifying the name of the color, using hexadecimal values, RGB values, or other color formats." }, { "type": "heading", "level": "4", "text": "Ways to Set Color: " }, { "type": "list", "items": [ "Color Names: Common colors like red, blue, green, etc.", "Hexadecimal Codes: Colors can be expressed with hex codes, like #ff0000 for red.", "RGB (Red, Green, Blue): Define colors using rgb(255, 0, 0) format, where each number represents the intensity of red, green, and blue." ] }, { "type": "textarea", "text": "Hello World
\nHello World
\nHello World
\nHello World
" } ] }, { "title": "HTML Formatting", "description": "Formatting elements in HTML are used to style text and provide emphasis, helping to convey meaning and improve readability. These elements allow you to alter the appearance of text, such as making it bold or italicized, and are essential for creating visually engaging web pages.", "sub_description": "This adds special meaning to a text.This allowing it to stand out and communicate importance more effectively.", "additional_info": "HTML formatting elements:", "content": [ { "type": "list", "items": [ "Bold text - <b></b>", "Strong text- <strong></strong>", "Italics text- <i></i>", "Emphasized text- <em></em>", "Smaller text- <small></small>", "Deleted text- <del></del>", "Inserted text- <ins></ins>", "Subscript text- <sub></sub>", "Superscript text- <sup></sup>" ] }, { "type": "paragraph", "text": "Below is a detailed explanation of each formatting element:" }, { "type": "heading", "level": "4", "text": "Bold tag:" }, { "type": "paragraph", "text": "This tag is used to make a text bold. This doesn’t add any importance to text.About us - The Industrial Training Company In Amritsar" }, { "type": "heading", "level": "4", "text": "<blockquote> tag:" }, { "type": "paragraph", "text": "This tag is used for block-level long quotations. We can use cite attribute to define if the quote has been taken from another source. This is used to display quote from other sources also." }, { "type": "textarea", "text": "
We, at Webcooks excel in training and nurturing young minds to develop dynamic websites and web apps with intuitive user interface without compromising their speed and efficiency during the peak hours.
About us - The Industrial Training Company In Amritsar" }, { "type": "heading", "level": "4", "text": "<cite> tag:" }, { "type": "paragraph", "text": "The <cite> element is used to reference the title of any creative work, such as books, movies, songs, paintings, or any other artistic or scholarly work. It helps to underlines titles in the form of making them conspicuous to ordinary text. Most browsers will display text within the <cite> tag in italics, making it visually clear that the text is a title or reference." }, { "type": "textarea", "text": "Webcooks - The Industrial Training Company In Amritsar" }, { "type": "heading", "level": "4", "text": "<abbr> tag:" }, { "type": "paragraph", "text": "The element is used to define abbreviations or acronyms within your HTML content. This tag not only helps present shortened forms of words clearly but also provides a way to include additional information through the title attribute. This is particularly useful for translation systems, browsers, and search engines, which can interpret the full meaning of the abbreviation." }, { "type": "textarea", "text": "
We, at Webcooks, excel in training and nurturing young minds to develop dynamic websites and web apps with intuitive user interfaces without compromising their speed and efficiency during peak hours.
NGO is any non-profit, \n\t\tvoluntary group of individuals
" }, { "type": "heading", "level": "4", "text": "<bdo> tag:" }, { "type": "paragraph", "text": "The bdo element is the acronym for Bi-Directional Override. It overrides the default flow of text in a web page to render properly when content contains languages that use different directions of text, such as Hebrew or Arabic. By using the dir attribute, you can force the text to be displayed from left to right (ltr) or right to left (rtl), regardless of the page's overall direction." }, { "type": "textarea", "text": "This text is displayed right-to-left using the tag." }, { "type": "heading", "level": "4", "text": "<address> tag:" }, { "type": "paragraph", "text": "The <address> element is used to define contact information for the author, owner, or entity responsible for a document or article. This can include physical addresses, email addresses, phone numbers, URLs, or social media handles. It is typically used at the bottom of web pages or articles to provide user contact details." }, { "type": "paragraph", "text": "Browsers usually display the content within the <address> tag in italics and add line breaks before and after the element, making it stand out from the rest of the text." }, { "type": "textarea", "text": "Webcooks: 23, IInd Floor, D-Block Ranjit Avenue, Near Starbucks, Amritsar (Punjab), 143001" } ] }, { "title": "HTML Colors", "description": "In HTML, colors can be specified using the style attribute within any HTML tag. Different colors can be assigned to different elements such as text, backgrounds, borders, etc. ", "sub_description": "Colors can be used to highlight interactive elements like buttons or links, guiding users towards key actions and improving the overall navigation experience.", "additional_info": "Colors can be defined in several ways, including color names, hexadecimal, RGB, or HSL.", "content": [ { "type": "heading", "level": "4", "text": "There are three common ways to apply colors in HTML:" }, { "type": "list", "items": [ "Text Color", "Background Color", "Border Color" ] }, { "type": "heading", "level": "4", "text": "Text Color:" }, { "type": "paragraph", "text": "In HTML, the color of the text can be customized using the color property within the style attribute of any tag. This allows you to change the default text color to any color value, such as color names, hexadecimal values, or RGB codes." }, { "type": "paragraph", "text": "Syntax:Text content
" }, { "type": "heading", "level": "4", "text": "Internal Styling" }, { "type": "paragraph", "text": "Internal styling, in HTML, is defined by assigning a style element within the head section of a single HTML document. This method allows for styling multiple elements within that specific document only. The styles are written inside the <style> tags." }, { "type": "textarea", "text": "\n\n\n\n\n\n\n\tThis is a paragraph.
\n\n\n" }, { "type": "heading", "level": "4", "text": "External Styling" }, { "type": "paragraph", "text": "External Styling in HTML External Styling is done in HTML by linking to an external CSS file in the head section of an HTML document.This method allows the same style rules to be applied across multiple HTML documents, ensuring consistency across a website. The CSS file is linked using the <link> tag." }, { "type": "textarea", "text": "\n\n\n\t\n\n\n\n\tThis is a paragraph.
\n\n\n" } ] }, { "title": "HTML Images", "description": "Images can be inserted into a webpage or HTML document using the![\"Comparison](\"https://www.webcooks.in/lms/assets/images/webcooks-image-300.jpeg\")
"
},
{
"type": "heading",
"level": "4",
"text": "Alt Attribute:"
},
{
"type": "paragraph",
"text": "The alt attribute can be used in the <img> tag to describe an alternative text for an image.If the image fails to display due to an error, this text will appear in its place, providing information about what the image represents."
},
{
"type": "textarea",
"text": ""
},
{
"type": "heading",
"level": "2",
"text": "Height and width of image:"
},
{
"type": "paragraph",
"text": "There are two ways to specify height and width for an image:"
},
{
"type": "list",
"items": [
"Using style attribute",
"Using height and width attribute"
]
},
{
"type": "heading",
"level": "4",
"text": "Using style attribute:"
},
{
"type": "paragraph",
"text": "This method employs inline CSS styling to define the height and width of the image. The properties are specified within the style attribute."
},
{
"type": "textarea",
"text": ""
},
{
"type": "heading",
"level": "4",
"text": "Using height and width attribute:"
},
{
"type": "paragraph",
"text": "The height and width attributes may also be used to define the image's size directly in the <img> tag."
},
{
"type": "textarea",
"text": ""
}
]
},
{
"title": "HTML Links",
"description": "In HTML, hyperlinks are created using the <a> (anchor) tag. These links allow users to navigate to other webpages or documents when clicked. The destination URL is specified using the href attribute inside the <a> tag.",
"sub_description": "Syntax:This is some text. Scroll down to see the Webcooks bookmarked section.
\n\nMore text to create some space...
\nEven more text to create space...
\n\n \nWelcome to the Webcooks section of this webpage!
\n\n\n" } ] }, { "title": "HTML Favicon", "description": "A favicon is the small image or icon appearing to the left of a browser tab or in the bookmark bar. It is commonly used to represent a website visually and often serves as the site's logo. Favicons help users quickly identify a website in a list of open tabs or bookmarks, improving recognition and user experience.", "sub_description": "The favicon is typically provided using the tag in the section of an HTML document. It usually points to an image file such as a .ico, .png, or .svg.", "additional_info": "Syntax:This is a paragraph inside a block-level element. Block-level elements occupy the full width and start on a new line.
\nThis is a paragraph with inline-level elements like links and bold text inside. Inline elements do not start on a new line and only take up as much space as necessary.
" }, { "type": "heading", "level": "4", "text": "The <div> Element:" }, { "type": "paragraph", "text": "The <div> element serves as a versatile container for grouping other HTML elements. As a block-level element, it takes up the full width of its parent container and starts on a new line. The <div> can be styled with CSS to modify attributes such as color, background, or positioning." }, { "type": "textarea", "text": "This is a sentence with a highlighted text using the element.
" } ] } ], "HTML Id": [ { "title": "HTML Id", "description": "The HTML id attribute is used to assign a unique identifier to any HTML element within a document. Every id should be unique, it should not be assigned for two elements at once.", "sub_description": "This uniqueness is essential for accurately targeting specific elements when applying styles or manipulating them with JavaScript. An id in HTML is referred as in CSS using the # followed by the id name.", "additional_info": "Syntax in html element:This paragraph has a unique ID attribute called 'webcooks'.
" }, { "type": "heading", "level": "4", "text": "CSS Styling with ID:" }, { "type": "paragraph", "text": "When styling an element using its id in CSS, the id name is prefixed with a hash (#)." }, { "type": "textarea", "text": "\nThis text is styled using the 'webcooks' ID.
" }, { "type": "heading", "level": "4", "text": "Difference between Class and ID in HTML:" }, { "type": "list", "items": [ "Class: The class attribute can be assigned to multiple HTML elements, allowing them to share the same styles or be manipulated in bulk through JavaScript. It helps classify groups of like elements and can be reused throughout the document.", "ID: As the name of an id attribute puts it, that attribute is unique, meaning it can only be assigned to one element of the whole HTML document. It is typically used for specific, unique elements that need individual styling or manipulation." ] }, { "type": "heading", "level": "4", "text": "Bookmarking:" }, { "type": "paragraph", "text": "Bookmarking in HTML allows users to navigate to specific sections of a webpage quickly. First, an id is given to the target html element that you want to be referred to. Then inside of a link () tag, it refers to that id in the href attribute with an # symbol and the value of the id." }, { "type": "textarea", "text": "This paragraph is styled with the 'webcooks' class.
" }, { "type": "paragraph", "text": "Multiple classes can be assigned to a single element by separating the class names with spaces:" }, { "type": "textarea", "text": "This paragraph is styled with multiple classes: webcooks, courses, and events.
", "showButton": false }, { "type": "heading", "level": "4", "text": "Accessing Elements with JavaScript" }, { "type": "paragraph", "text": "JavaScript provides a method called getElementsByClassName to access elements based on their class names.This method returns an array-like collection of the elements that have the specified class.This allows developers to manipulate multiple elements simultaneously, enhancing the interactivity of web pages." }, { "type": "textarea", "text": "" } ] } ], "HTML iframe": [ { "title": "HTML iframe", "description": "An iframe (Inline Frame) in HTML is used to embed external content like webpages, maps, videos, or other resources within a webpage. It allows the external content to be displayed inside a specified rectangular area on the current page.", "sub_description": "The iframe tag is self-contained, and it creates a separate browsing context within the parent page.", "additional_info": "Syntax:Webcooks is dedicated to providing the best training in web development.
\n![\"Webcooks](\"https://www.webcooks.in/assets/images/webcooks-logo.webp\"){kind=logo}
\nWelcome to the Webcooks blog, where you can find the latest tips and tutorials on web development.
\nStay tuned for more updates!
\nWebcooks offers a variety of training courses in web development, focusing on practical skills and hands-on experience.
\nWebcooks specializes in web development training, helping individuals enhance their skills in creating dynamic websites.
\n\n At Webcooks, we specialize in training individuals to create dynamic and responsive web applications.
\nExplore our courses and join our community of aspiring developers!
\nLearn more about our Webcooks training programs to enhance your web development skills!
" }, { "type": "heading", "level": "4", "text": "<time> Element" }, { "type": "paragraph", "text": "The <time> tag is used to represent specific times or dates. It can be formatted in a way that makes it machine-readable, which can be useful for search engines or other automated systems to parse." }, { "type": "textarea", "text": "The event will take place on at Webcooks.
" } ] } ], "HTML Entities": [ { "title": "HTML Entities", "description": "HTML entities are special characters in HTML that represent reserved characters or symbols which cannot be directly typed into HTML. For example, < (less than) and > (greater than) are part of HTML syntax and therefore need to be replaced by entities like < and > so that they are displayed correctly in the browser.", "sub_description": "HTML entities are referenced with an ampersand (&), the name of an entity, or a number followed by a semicolon (;).", "additional_info": "Syntax:HTML entities are used to display special characters in HTML. For example, to show a less than sign, use < and for a greater than sign, use >. The syntax for HTML entities is as follows:
A non-breaking space ( ) keeps words together without breaking to a new line. Example: Visit Webcooks for web development!
" }, { "type": "heading", "level": "4", "text": "Combining Diacritical Marks" }, { "type": "paragraph", "text": "Combining diacritical marks are symbols added to letters to change their sound or meaning, such as accents or other phonetic marks. For example, the grave accent ( ̀) or acute accent ( ́). In HTML, diacritical marks are combined with alphanumeric characters to produce new symbols." }, { "type": "paragraph", "text": "Some common diacritical marks:" }, { "type": "list", "items": [ "Grave accent → ̀", "Acute accent → ́" ] }, { "type": "paragraph", "text": "Diacritical marks are essential in languages that require special phonetic notation or accents, such as French or Spanish." }, { "type": "textarea", "text": "Using combining diacritical marks: webcooks̃ = webcooks̃.
" }, { "type": "heading", "level": "4", "text": "HTML Symbols" }, { "type": "paragraph", "text": "HTML symbols are characters or symbols that do not exist in a regular keyboard. These include currency symbols, mathematical symbols, and other technical symbols.😊 This is a smiling face emoji.
" }, { "type": "heading", "level": "4", "text": "Decimal Code:" }, { "type": "list", "items": [ "😊 → 😊", "👍 → 👍" ] }, { "type": "textarea", "text": "😊 Join Webcooks for an exciting learning experience!
\n👍 Webcooks is the place to enhance your skills!
" }, { "type": "heading", "level": "4", "text": "Copying from External Sources:" }, { "type": "paragraph", "text": "You can copy from external sites and then directly paste into the HTML code because of emoji characters." }, { "type": "textarea", "text": "Join Webcooks and enjoy learning with a smile! 😊
\nWebcooks appreciates your hard work! 👍
\nLaunch your career with Webcooks! 🚀
" }, { "type": "heading", "level": "4", "text": "Mathematical Symbols in HTML" }, { "type": "paragraph", "text": "Some common HTML entities for mathematical symbols include:" }, { "type": "list", "items": [ "Plus-minus (±) → ± or ±", "Multiplication (×) → × or ×", "Division (÷) → ÷ or ÷" ] }, { "type": "heading", "level": "4", "text": "Greek Letters in HTML" }, { "type": "paragraph", "text": "Greek letters can also be displayed using HTML entities, and they are often used in scientific or mathematical content." }, { "type": "paragraph", "text": "Example:" }, { "type": "list", "items": [ "Alpha (α) → α or α", "Beta (β) → β or β" ] }, { "type": "textarea", "text": "Gamma (γ) → γ or γ
\nDelta (δ) → δ or δ
\nTheta (θ) → θ or θ
" } ] } ], "HTML Charsets": [ { "title": "HTML Charsets", "description": "To render an HTML page correctly, a web browser needs to be told what character set (or encoding) to use. Character sets determine how the characters and symbols are interpreted and displayed on the webpage.", "sub_description": "This page is encoded in UTF-8, allowing for a wide variety of characters.
\n\n" }, { "type": "heading", "level": "4", "text": "ASCII Character Set Encoding:" }, { "type": "paragraph", "text": "The first widely used character encoding was ASCII (American Standard Code for Information Interchange). ASCII is very basic and doesn't include characters from non-English languages. It defines 128 characters, including:" }, { "type": "list", "items": [ "English letters (A-Z, a-z)", "Numbers (0-9)", "!, <, >, +, -, (, ), $, @" ] }, { "type": "heading", "level": "4", "text": "ANSI Character Set:" }, { "type": "paragraph", "text": "The ANSI character set, also known as Windows-1252, was originally used by Windows. This encoding is an extension of ASCII:" }, { "type": "list", "items": [ "The first 127 characters are identical to ASCII.", "Characters from 128 to 159 include special symbols and additional characters.", "Characters from 160 to 255 are identical to UTF-8." ] }, { "type": "paragraph", "text": "Syntax:This is an example of an XHTML document. All tags must be properly closed, such as this bold text.
\n\n\n"
},
{
"type": "textarea",
"text": "-----HTML5 Example----\n\n\n\n \n \n This is an example of an HTML5 document. Tags can be left unclosed, like this bold text.
\n\n\n"
}
]
}
],
"HTML Lists": [
{
"title": "HTML Lists",
"description": "A list in HTML is a structured way to display a collection of related items, either in a specific order or without any particular order. Lists make content easier to read and navigate by organizing it into logical sections.",
"sub_description": "here are two primary types: ordered lists (<ol>) and unordered lists (<ul>). Ordered lists display items in a specific sequence, usually using numbers, while unordered lists use bullets for each item. Another type, the definition list (<dl>), pairs terms with their definitions.",
"additional_info": "Let's now describe the different types of lists in detail: ",
"content": [
{
"type": "heading",
"level": "4",
"text": "Order list:"
},
{
"type": "paragraph",
"text": " Ordered lists in HTML are useful to maintain items in a definite sequence or order. The structure of an ordered list begins with the <ol> tag, and each item within the list is marked with the <li> (list item) tag."
},
{
"type": "list",
"items": [
"There is an HTML tag for ordered lists, to which the beginning of an ordered list is assigned. ",
"In the list, the <li> tag then represents each item.",
"The list items are formatted with numbers, in sequence, by default."
]
},
{
"type": "textarea",
"text": "| Course | \nDuration | \nPlatform | \n
|---|---|---|
| HTML Basics | \n3 weeks | \nWebcooks | \n
| CSS Design | \n4 weeks | \nWebcooks | \n
| JavaScript Essentials | \n5 weeks | \nWebcooks | \n
| Header 1 | \nHeader 2 | \n
|---|---|
| Data 1 | \nData 2 | \n
| Header 1 | \nHeader 2 | \n
|---|---|
| Data 1 | \nData 2 | \n
| Data 3 | \nData 4 | \n
| Header 1 | \nHeader 2 | \n
|---|---|
| Data 1 | \nData 2 | \n
| Data 3 | \nData 4 | \n
| Header 1 | \nHeader 2 | \n
|---|---|
| Data 1 | \nData 2 | \n
| Data 3 | \nData 4 | \n
| Header 1 | \nHeader 2 | \n
|---|---|
| Data 1 | \nData 2 | \n
| Data 3 | \nData 4 | \n
| Header 1 | \nHeader 2 | \n
|---|---|
| Data 1 | \nData 2 | \n
| Data 3 | \nData 4 | \n
| Header with Colspan | \n|
|---|---|
| Data 1 | \nData 2 | \n
| Data spanning two columns | \n|
| Data 3 | \nData 4 | \n