Scribd
Upload
13 views4 pages

Web Design 6 10

The document discusses HTML hyperlinks and attributes like target and href. It also covers HTML forms, form elements like input, textarea and select tags. The document then discusses applying CSS styles through inline, internal and external stylesheets and properties to style text like color, font, size and background colors of elements.

Uploaded by

th y
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views4 pages

Web Design 6 10

The document discusses HTML hyperlinks and attributes like target and href. It also covers HTML forms, form elements like input, textarea and select tags. The document then discusses applying CSS styles through inline, internal and external stylesheets and properties to style text like color, font, size and background colors of elements.

Uploaded by

th y
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

LESSON 6

Hyperlinks
hyperlink target attribute
The target attribute specifies where to open the linked document.

Hyperlink is a reference link that allows you to navigate to


another page of the same document or to another document. _blank
Opens the linked document in a new window or tab.
html link _self
An HTML link is defined with the <a> tag. default; - Opens the linked document in the same window/tab
as it was clicked.

LIST OF HTML ATTRIBUTES


_parent
Opens the linked document in the parent frame.
href attribute
This attribute is used to define link address. _top
EXAMPLE:
<a href="https://www.w3schools.com"> This is a link </a> Opens the linked document in the full body of the window.

img attribute
Use the <img> element (inside <a> to use an image as link. EXAMPLE:
EXAMPLE: <a href="https://www.w3schools.com" target="_blank"> This is a
<a href="https://www.w3schools.com" img="google.com"> This is a link </a>
link </a>

LESSON 7
html form
form
Created as a means of making web pages interactive, allowing users to enter requested information to be submitted for processing.
FORM TAG VALUE OF TYPE ATTRIBUTE

<FORM> </FORM>
text
Attributes ACTION URL ADDRESS create a single line text input box
METHOD GET, POST password
same as text but the input text is masked for security reason.
INPUT TAG checkbox
<INPUT> create a checkbox.
radio
Attributes NAME URL ADDRESS creates a list of alternatives on which only one can be selected.
TYPE THE METHOD USED submit
SIZE ANY NUMBER create a button that submit a form when click.
VALUE ANY TEXT STRING reset
CHECKED NONE create a button that clears the whole form.
SELECT TAG OPTION TAG TEXTAREA TAG
<SELECT> </SELECT> <SELECT> </SELECT> <TEXTAREA> </TEXTAREA>

definition USED TO DEFINE DROPDOWN definition USED INSIDE THE SELECT TAG definition CREATES A MULTI-LINED
LIST TO SPECIFY ITEMS ON THE TEXT INPUT BOX.
DROPDOWN LIST

attributes NAME ANY TEXT OR STRING attributes VALUE ANY TEXT OR STRING attributes NAME ROW
SIZE ANY NUMBER SELECTED NONE COLUMN WRAP

LESSON 8
creating stylesheets
CSS (Cascading Style Sheets)
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

APPLY CSS IN 3 WAYS

INLINE CSS EXTERNAL CSS


An inline CSS is used to apply a unique style to a single HTML An external style sheet is used to define the style for many HTML
element. pages.
An inline CSS uses the style attribute of an HTML element. To use an external style sheet, add a link to it in the section of
EXAMPLE: the HTML page:
<h1 style="color:blue;"> This is a Blue Heading </h1>
EXAMPLE:
INTERNAL CSS <!DOCTYPE html>
An internal CSS is used to define a style for a single HTML <html>
page. <head>
<link rel="stylesheet" href="styles.css">
An internal CSS is defined in the <head> section of an HTML </head>
page, within a <style> element. <body>
EXAMPLE: <h1> This is heading. </h1>
<!DOCTYPE html> <p> This is paragraph.</p>
<html>
<head> </body>
<style> </html>
body {background-color: powderblue;} Here is how the "styles.css" looks:
h1 {color: blue;} body {
background-color: powderblue;
p {color: red;} }

</style> h1 {
</head> color: blue;
<body> }
<h1> This is heading. </h1> p{
<p> This is paragraph.</p> color: red;
}
</body>
</html>
LESSON 9
styling with CSS
text properties example (internal css):
<!DOCTYPE html>
COLOR <html>
defines the text color to be used <head>
example (inline css): <style>
<h1 style="color:blue;"> This is heading. </h1>
<p style="color:red;"> This is paragraph.</p> h1 {
color: blue;
font-family font-family: verdana;
defines the font to be used font-size: 300%
example (inline css): }
<h1 style="font-family:verdana;"> This is heading. </h1>
<p style="font-family:courier;> This is paragraph.</p> p{
color: red;
font-size font-family: courier;
defines the text size to be used font-size: 160%
example (inline css): }
<h1 style="font-size:300%;"> This is heading. </h1>
<p style="font-size:160%;> This is paragraph.</p> </style>
</head>
text-align <body>
defines the text color to be used
example (inline css): <h1> This is heading. </h1>
<h1 style="text-align:center;"> Centered heading </h1> <p> This is paragraph.</p>
<p style="text-align:center;> Centered paragraph</p>
</body>
</html>

background properties example (inline css):


<body style="background-color:powderblue;">
BACKGROUND-COLOR <h1>This is heading. </h1>
defines the background color for an HTML element <p> This is paragraph.</p>
<body>

table properties
border example (internal css):
defines a border around an HTML element p {
border: 1px solid powder blue; }
padding example (internal css):
defines a padding (space) between the text and the border. p {
border: 1px solid powder blue;
padding: 30px; }
margin example (internal css):
defines a margin (space) outside the border. p {
border: 1px solid powder blue;
margin: 50px; }
LESSON 10
selectors, div, span and link
css selectors class selectors
Used to "find" (or select) the HTML elements you want to style. The class selector selects HTML elements with a specific class
attribute.

five categories example (internal css):


In this example all HTML elements with <class="center">
will be red and center-aligned:
simple selectors
select elements based on name, id, class .center {
combinator selectors text-align: center;
select elements based on a specific relationship between them color: red;
pseudo-class selectors }
select elements based on a certain state
pseudo-elements selectors
select and style a part of an element You can also specify that only specific HTML elements
attribute selectors should be affected by a class.
select elements based on an attribute or attribute value
p.center {
element selectors text-align: center;
color: red;
}
The element selector selects HTML elements based on the element
name. universal selector
example (internal css): The universal selector (*) selects all HTML elements on the page.
Here, all elements on the page will be center aligned,
with a red text color: example (internal css):
The CSS rule below will affect every HTML element on
p { the page:
text-align: center;
color: red; *{
} text-align: center;
color: blue;
}
id selectors grouping selector
The id selector uses the id attribute of an HTML element to select
a specific element. The grouping selector selects all the HTML elements with the same
style definitions.
example (internal css):
The CSS rule below will be applied to the HTML element example (internal css):
with <id="para1"> The CSS rule below will affect every HTML element on
the page:
#para1 {
text-align: center; h1, h2, p {
color: red; text-align: center;
} color: blue;
}
NOTE: An id name cannot start with a number

You might also like