Posts
HTML_10_Layout
Layout HTML has several semantic elements that define the different parts of a web page: <header> - Defines a header for a document or a section <nav> - Defines a set of navigation links <section> - Defines a section in a document <article> - Defines an independent, self-contained content <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details that the user can open and close on demand <summary> - Defines a heading for the <details> element <main> - The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. ID attribute & class attribute the id attribute, it is used to uniquely identify that element from other elements...
HTML_9_Meta
Meta The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag (See "Setting The Viewport" example below). Define keywords for search engines: < meta name ="keywords" content ="HTML, CSS, JavaScript"> Define a description of your web page: < meta name ="description" content ="Free Web tutorials for HTML and CSS"> Define the author of a page: < meta name =...
HTML_8_Form
Form The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <legend> <label> <form> <fieldset> <legend>Sing In</legend> <label>Username:</label> <input type="text" name="username" placeholder="Enter your name" size="30" maxlength="2 <br> <label>Password:</label> <input type="password" placeholder="*******" size="10" maxlength="16"> <br> <label>Message:</label> <textarea cols="30" rows="10">Message</textarea> <h2>Selection</h2> <input type="radio" name="gen" value="Male">Male <input type="radio" name="ge...
HTML_7_Link
Link Links are created using the <a> element which has an attribute called href. The value of the href attribute is the page that you want people to go to when they click on the link. Users can click on anything that appears between the opening <a> tag and the closing </a> tag and will be taken to the page specified in the href attribute. <a> other-sites.html HTML Link Type Link to other website Link to other website with new tab Link to email Link to Top (ID) and Bottom Link to Pages (Same folder, Child folder, Parents folder and so on) Link to Other Website <a href="https://www.google.com/">Google</a> Link to Other Website with New Tab <a href="https://www.google.com/" target="_blank">Google New Tab</a> Link to Email <a href="mailto:coffeehouse@gmail.com">Email Us</a> Link to Other Website <a href="https://www.google.com/">Google</a> Link to Other Website with N...
HTML_6_Media
Media Image <img> To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes: src This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site. alt This provides a text description of the image which describes the image if you cannot see it. title You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image. <img src="car.jpg" alt="car" title="car" /> <figure> Images often come with captions. HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated. <figcaption> The <figcaption> element has been added to HTML5 in order to a...
HTML_5_Table
Table HTML tables allow web developers to arrange data into rows and columns. An HTML table is created using the <table> tag. An HTML table consists of one <table> element and one or more <tr>, < th >, and <td> elements. Each <tr> represents a row, and within each row, < th > and <td> tags represent the table columns. <table> - defines a table <tr> - defines a row in a table <td> - defines a cell/column in a table < th > - defines a header cell/column in a table < thead > - groups the header contents in a table < tbody > - groups the body contents in a table < tfoot > - groups the footer content in a table Start and end of a table ...
HTML_4_List
List An HTML List is used to organize data on web pages into an ordered or unordered format to make the information easier to read and visually appealing. Types of HTML Lists There are 3 main types of lists in HTML: Unordered Lists (<ul>): These lists are used for items that do not need to be in any specific order. The list items are typically marked with bullets. Ordered Lists (<ol>): These lists are used when the order of the items is important. Each item in an ordered list is typically marked with numbers or letters. Description Lists (<dl>): These lists are used to contain terms and their corresponding descriptions. <ul> The unordered list is created with the <ul> element. <ol> The ordered list is created with the <ol> element. <li> Each item in the list is placed between an opening <li> tag and a closing </li> tag. The li stands for list item. <dl> The definition list is created with the <dl> elemen...
HTML_3_Paragraph
Paragraphs and Formatting <p> This is a paragraph </p> To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag. By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs. <p>This is a paragraph.</p> <p>This is a <b>Bold</b> paragraph.</p> <p>This is a <i>Itallic</i> paragraph.</p> <p>This is a <sup>Super</sup>paragraph.</p> <p>This is a <sub>Sub</sub> paragraph.</p> <p>This is a paragraph.</p> <p>This is <em>EM</em> a paragraph.</p> <p>This is <strong>Strong</strong> a paragraph.</p> <p>This is <small>Small</small> a paragraph.</p> <p>This is <ins>Insert</ins> a paragraph.</p> <p>This is a <del>Delete</del> para...
HTML_2_Heading
Heading HTML has six "levels" of headings: <h1> is used for main headings, <h2> is used for subheadings <h1> defines the most important heading. <h6> defines the least important heading. Use HTML headings for headings only. Don't use headings to make text BIG or bold. Each HTML heading has a default size. <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
HTML_1_Introduction
What is a website? A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Web advertising is any form of Internet-based marketing. Nowadays, websites become the tools or services for people in our working environments due to the digital transformation. Why we should use? First impression as a real business Online Presence 24/7 Information Exchange Easily Market Expansion Advertising Use anytime, anywhere, any devices Basic Website Language HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. CSS stands for Cascading Style Sheet, which is used to design the web page to be more attractive. JS stands for JavaScript, which is used to make web pages interactive and dynamic. What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTM...