SlideShare une entreprise Scribd logo
1  sur  24
WEB DESIGN
BASICS
12:52 AM 1
Page Jumps Recap
12:52 AM 2
Jump to Top
 Write your post;
 Switch to the Text Editor;
 Add <a id="top"></a> at the beginning of the post;
 Add <a href="#top">top</a> at the end of the post.
12:52 AM 3
Variations
12:52 AM 4
Variation in <a href="#top">top</a> will
change the name under which your
page jump link will be displayed.
<a href="#top”>Top of the Page</a>
<a href="#top">Jump to Top</a>
<a href="#top”>Go Up</a>
Now lets complicate things a bit…
12:52 AM 5
Take a typical Wikipedia page:
Montreal
So how do we do that?
12:52 AM 6
Let’s start by creating a sample page or post
Contents:
 Introduction
 Arguments
 Conclusion
Introduction
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
Arguments
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
Conclusion
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
12:52 AM 7
Make sure to chose an element
for your headings/titles!
12:52 AM 8
This is what your post/page text should look like in the Text
Editor:
12:52 AM 9
Contents:
<ol>
<li>Introduction</li>
<li>Arguments</li>
<li>Conclusion</li>
</ol>
<h2>Introduction</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
<h2>Arguments</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
<h2>Conclusion</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
Let’s now modify the elements IDs:
 <h2>Introduction</h2> becomes
 <h2 id="introduction">Introduction</h2>
<h2>Arguments</h2>
 <h2 id="arguments">Arguments</h2>
<h2>Conclusion</h2>
 <h2 id="conclusion">Conclusion</h2>
12:52 AM 10
Lastly, link the element IDs to
the Content list
12:52 AM 11
Jumping to another page
<a
href="http://startingmyownwebpage.wordpress
.com/">Go to Home</a>
Broken down:
<a href="address of your page">Display Name
of Your Link</a>
12:52 AM 12
The More Tag Command
12:52 AM 13
<!--more-->
Read More
12:52 AM 14
<!--more-->
<!--more But wait, there's more!-->
<!--more Read More-->
<!--more See Full Post-->
A few Examples
12:52 AM 15
http://startingmyownwebpage.wordpress.com
Excerpts
12:52 AM 16
Themes that support Excerpts
 Blix
 Fauna
 Flower Power
 Hemingway
 Steira
 Supposedly Clean
 Sweet Blossoms
12:52 AM 17
Next Page
12:52 AM 18
<!--nextpage-->
Example
Category Pages
12:52 AM 19
12:52 AM 20
Directories
See also: 20 Free Places to Promote Your
Website Online
Search Engine Optimization
 Include any keywords that people might use to the
search for your site in the content you post,
especially first paragraphs and headers.
 Use the Alternate Text space to describe relevant
content using keywords.
 Keep the site updated.
12:52 AM 21
Publicize Your Site
 E-Signatures, business cards, letterheads
 Take advantage of social bookmarking sites, such as
Del.icio.us, StumbleUpon, Digg, Reddit, and
Pinterest
 Take advantage of social media sites, such as
Facebook, Twitter, Flickr, LinkedIn, YouTube,
Google+
12:52 AM 22
More…
12:52 AM 23
5 Ways to Promote Your Website

Contenu connexe

Dernier

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdfVishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
ssuserdda66b
 

Dernier (20)

Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdfVishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 

En vedette

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Web design basics_06

  • 4. Jump to Top  Write your post;  Switch to the Text Editor;  Add <a id="top"></a> at the beginning of the post;  Add <a href="#top">top</a> at the end of the post. 12:52 AM 3
  • 5. Variations 12:52 AM 4 Variation in <a href="#top">top</a> will change the name under which your page jump link will be displayed. <a href="#top”>Top of the Page</a> <a href="#top">Jump to Top</a> <a href="#top”>Go Up</a>
  • 6. Now lets complicate things a bit… 12:52 AM 5 Take a typical Wikipedia page: Montreal
  • 7. So how do we do that? 12:52 AM 6
  • 8. Let’s start by creating a sample page or post Contents:  Introduction  Arguments  Conclusion Introduction Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Arguments Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Conclusion Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 12:52 AM 7
  • 9. Make sure to chose an element for your headings/titles! 12:52 AM 8
  • 10. This is what your post/page text should look like in the Text Editor: 12:52 AM 9 Contents: <ol> <li>Introduction</li> <li>Arguments</li> <li>Conclusion</li> </ol> <h2>Introduction</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <h2>Arguments</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <h2>Conclusion</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  • 11. Let’s now modify the elements IDs:  <h2>Introduction</h2> becomes  <h2 id="introduction">Introduction</h2> <h2>Arguments</h2>  <h2 id="arguments">Arguments</h2> <h2>Conclusion</h2>  <h2 id="conclusion">Conclusion</h2> 12:52 AM 10
  • 12. Lastly, link the element IDs to the Content list 12:52 AM 11
  • 13. Jumping to another page <a href="http://startingmyownwebpage.wordpress .com/">Go to Home</a> Broken down: <a href="address of your page">Display Name of Your Link</a> 12:52 AM 12
  • 14. The More Tag Command 12:52 AM 13 <!--more-->
  • 15. Read More 12:52 AM 14 <!--more--> <!--more But wait, there's more!--> <!--more Read More--> <!--more See Full Post-->
  • 16. A few Examples 12:52 AM 15 http://startingmyownwebpage.wordpress.com
  • 18. Themes that support Excerpts  Blix  Fauna  Flower Power  Hemingway  Steira  Supposedly Clean  Sweet Blossoms 12:52 AM 17
  • 19. Next Page 12:52 AM 18 <!--nextpage--> Example
  • 21. 12:52 AM 20 Directories See also: 20 Free Places to Promote Your Website Online
  • 22. Search Engine Optimization  Include any keywords that people might use to the search for your site in the content you post, especially first paragraphs and headers.  Use the Alternate Text space to describe relevant content using keywords.  Keep the site updated. 12:52 AM 21
  • 23. Publicize Your Site  E-Signatures, business cards, letterheads  Take advantage of social bookmarking sites, such as Del.icio.us, StumbleUpon, Digg, Reddit, and Pinterest  Take advantage of social media sites, such as Facebook, Twitter, Flickr, LinkedIn, YouTube, Google+ 12:52 AM 22
  • 24. More… 12:52 AM 23 5 Ways to Promote Your Website