saide-hossain
Untitled
5 posts
Don't wanna be here? Send us removal request.
saide-hossain · 2 months ago
Text
Tumblr media
0 notes
saide-hossain · 2 months ago
Text
Tumblr media
0 notes
saide-hossain · 2 months ago
Text
Tumblr media
0 notes
saide-hossain · 3 months ago
Text
HTML Links
Tumblr media
Links, also known as hyperlinks, are one of the fundamental elements of the web. They allow users to navigate between different pages on the internet, jump to specific sections within a page, or even trigger actions like downloading files or opening an email client. Here’s a detailed guide on how to create and use HTML links.
Basic Structure of an HTML Link
The basic HTML link is created using the <a> (anchor) tag. The most essential attribute for an anchor tag is href, which stands for "hyperlink reference". It specifies the destination URL or the action triggered when the link is clicked.
Basic Example
<a href="https://www.example.com">Visit Example</a>
In this example:
href: Specifies the URL of the page the link goes to.
Link Text: “Visit Example” is the clickable text.
Types of Links
External Links
These links point to a different website.
<a href="https://www.google.com">Go to Google</a>
Internal Links
These links point to another page within the same website.
<a href="about.html">About Us</a>
Anchor Links (Jump Links)
These links jump to a specific section within the same page. To create an anchor link:
Define an id attribute for the target element.
Link to this id.
<h2 id="section1">Section 1</h2> <a href="#section1">Jump to Section 1</a>
Mailto Links
These links open the user’s email client to send an email to a specified address.
<a href="mailto:[email protected]">Send an Email</a>
Telephone Links
These links allow users to make a phone call when clicked on a device that supports calling.
<a href="tel:+1234567890">Call Us Now</a>
Download Links
These links trigger the download of a file when clicked.
<a href="file.pdf" download>Download PDF</a>
Opening Links in a New Tab
To open a link in a new tab, you use the target="_blank" attribute:<a href="https://www.wikipedia.org" target="_blank">Open Wikipedia in a New Tab</a>
Adding Titles to Links
You can add a title attribute to provide additional information that appears as a tooltip when hovering over the link:<a href="https://www.example.com" title="Visit Example Website">Visit Example</a>
Link Styling with CSS
You can style links using CSS to change their appearance. Common states include:
a:link: The default state for an unvisited link.
a:visited: The state for a link that the user has visited.
a:hover: The state when the user hovers over the link.
a:active: The state when the link is being clicked.
Example CSS:a { color: blue; text-decoration: none; }a:hover { color: red; text-decoration: underline; }
Using Links as Buttons
You can style links to look like buttons using CSS:<a href="https://www.example.com" class="button">Click Me</a><style> .button { background-color: #4CAF50; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 5px; } </style>
No-Follow Links
Adding rel="nofollow" to a link tells search engines not to follow the link, which is often used for sponsored links or to prevent passing link authority:<a href="https://www.example.com" rel="nofollow">Sponsored Link</a>
Linking to Images
You can link to images so that when the image is clicked, it navigates to a different page:<a href="https://www.example.com"> <img src="image.jpg" alt="Example Image"> </a>
Combining Multiple Attributes
You can combine multiple attributes in a single anchor tag to create complex behaviors:<a href="https://www.example.com" target="_blank" title="Visit Example" rel="noopener noreferrer"> Visit Example </a>
Key Takeaways
Anchor Tag: The <a> tag is used to create links. The href attribute is essential.
Link Types: Links can be external, internal, anchor, mailto, telephone, or download links.
Attributes: Enhance links with target, title, rel, and more to control their behavior and provide additional context.
Styling: Links can be styled with CSS to fit the design of your website.
Understanding these basics will allow you to effectively use links in your HTML documents to navigate and structure your website’s content.
Read From the Original Blog
0 notes
saide-hossain · 3 months ago
Text
Let's understand HTML
Tumblr media
Cover these topics to complete your HTML journey.
HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:
1. Basics of HTML
Introduction to HTML
HTML Document Structure
HTML Tags and Elements
HTML Attributes
HTML Comments
HTML Doctype
2. HTML Text Formatting
Headings (<h1> to <h6>)
Paragraphs (<p>)
Line Breaks (<br>)
Horizontal Lines (<hr>)
Bold Text (<b>, <strong>)
Italic Text (<i>, <em>)
Underlined Text (<u>)
Superscript (<sup>) and Subscript (<sub>)
3. HTML Links
Hyperlinks (<a>)
Target Attribute
Creating Email Links
4. HTML Lists
Ordered Lists (<ol>)
Unordered Lists (<ul>)
Description Lists (<dl>)
Nesting Lists
5. HTML Tables
Table (<table>)
Table Rows (<tr>)
Table Data (<td>)
Table Headings (<th>)
Table Caption (<caption>)
Merging Cells (rowspan, colspan)
Table Borders and Styling
6. HTML Forms
Form (<form>)
Input Types (<input>)
Text Fields (<input type="text">)
Password Fields (<input type="password">)
Radio Buttons (<input type="radio">)
Checkboxes (<input type="checkbox">)
Drop-down Lists (<select>)
Textarea (<textarea>)
Buttons (<button>, <input type="submit">)
Labels (<label>)
Form Action and Method Attributes
7. HTML Media
Images (<img>)
Image Maps
Audio (<audio>)
Video (<video>)
Embedding Media (<embed>)
Object Element (<object>)
Iframes (<iframe>)
8. HTML Semantic Elements
Header (<header>)
Footer (<footer>)
Article (<article>)
Section (<section>)
Aside (<aside>)
Nav (<nav>)
Main (<main>)
Figure (<figure>), Figcaption (<figcaption>)
9. HTML5 New Elements
Canvas (<canvas>)
SVG (<svg>)
Data Attributes
Output Element (<output>)
Progress (<progress>)
Meter (<meter>)
Details (<details>)
Summary (<summary>)
10. HTML Graphics
Scalable Vector Graphics (SVG)
Canvas
Inline SVG
Path Element
11. HTML APIs
Geolocation API
Drag and Drop API
Web Storage API (localStorage and sessionStorage)
Web Workers
History API
12. HTML Entities
Character Entities
Symbol Entities
13. HTML Meta Information
Meta Tags (<meta>)
Setting Character Set (<meta charset="UTF-8">)
Responsive Web Design Meta Tag
SEO-related Meta Tags
14. HTML Best Practices
Accessibility (ARIA roles and attributes)
Semantic HTML
SEO (Search Engine Optimization) Basics
Mobile-Friendly HTML
15. HTML Integration with CSS and JavaScript
Linking CSS (<link>, <style>)
Adding JavaScript (<script>)
Inline CSS and JavaScript
External CSS and JavaScript Files
16. Advanced HTML Concepts
HTML Templates (<template>)
Custom Data Attributes (data-*)
HTML Imports (Deprecated in favor of JavaScript modules)
Web Components
These topics cover the breadth of HTML and will give you a strong foundation for web development.
Full course link for free: https://shorturl.at/igVyr
2 notes · View notes