Bhavitha Cherukuri

Tuesday, October 3, 2023

HTML Links

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links — Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links — Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">click here</a>

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The click here is the part that will be visible to the reader.

Clicking on the click here , will send the reader to the specified URL address.

Example

This example shows how to create a link:

<!DOCTYPE html>
<html>
    <head>
        <title>
            My website

        </title>

    </head>
    <body>

        <a href="https://medium.com">
        click me
        </a>

        <br>

        <a href = "lyrics.html">
        song lyrics
        </a>

        <br>

        <a href="test@fake.com">
        email me
        </a>

        
    </body>


</html>

This is how a new webpage opens with three hyperlinks:

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

HTML Links — The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Example

Use target=”_blank” to open the linked document in a new browser window or tab:

<!DOCTYPE html>
<html>
    <head>
        <title>
            My website

        </title>

    </head>
    <body>

        <a href="https://medium.com" 
        target ="_blank"
        title = "Goes to google">
        click me</a>

        <br>
    </body>
</html>

So, the new webpage opens after clicking on the hyperlink:

Saturday, September 30, 2023

HTML Styles — CSS

HTML Styles — CSS

CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

A new webpage opens as shown below with the selected borders and colors:

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below with the selected padding:

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid hsl(28, 80%, 47%);
  margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below with the selected margins:

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example

This example uses a full URL to link to a style sheet:

<!DOCTYPE html>
<html>
    <head>
        <title>My website</title>
        <link rel="stylesheet" href="style2bor.css">
    </head>
    <body>
        <h1>borders in css</h1>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo assumenda unde ducimus autem inventore fugit similique in eos libero sequi tempore natus dolores laborum vitae non ipsa aperiam, hic ullam.</p>

    </body>
</html>

The external link in the html is shown below:

h1{
    border-style:solid;
    border-width:3px;
    border-color:black;
    border-radius:20px;
}
p{
    border-bottom: 3px solid #ff0000;
    border-top: 3px solid hsl(120, 35%, 57%);
    border-left: 3px dotted yellow;
    border-right: 3px dotted orange;
    border-radius: 10px;
}

A new webpage opens as shown below with the selected borders:

Friday, September 29, 2023

CSS Colors, Fonts and Sizes

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

FONT-FAMILY:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below with the selected font-family

FONT-SIZE:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:500%;">This is a heading</h1>
<p style="font-size:100%;">This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below with the selected font-size

FONT-COLOR:

<!DOCTYPE html>
<head>
    <title>
        css colors
    </title>
    <body>
        <h1 style="color:hsl(60, 87%, 34%)">Hello</h1>

        <p style="color:hsl(0, 100%, 50%)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A earum dicta sunt quos? Corporis officia ad reprehenderit veniam hic! Nisi, magni eum! Repudiandae, veritatis accusantium vel repellendus assumenda animi mollitia?</p>
    </body>
</head>

A new webpage opens as shown below with the selected font-colors

Bhavitha Cherukuri

Tuesday, October 3, 2023

HTML Links

HTML Links — Hyperlinks

HTML Links — Syntax

Example

HTML Links — The target Attribute

Example

Saturday, September 30, 2023

HTML Styles — CSS

CSS Border

Example

CSS Padding

Example

CSS Margin

Example

Link to External CSS

Example

Friday, September 29, 2023

CSS Colors, Fonts and Sizes

Example

FONT-FAMILY:

FONT-SIZE:

FONT-COLOR:

Building Static Website(part6) HTML Lists

Report Abuse