recentpopularlog in

neerajsinghvns : html   208

« earlier  
align text left and right same line html - Google Search
https://www.google.com/search?ei=kH3ZXP2aHO-Fggfs1Y3IDA&q=align+text+left+and+right+same+line+html&oq=align+text+left+and+right+in+the+same+&gs_l=psy-ab.1.1.0i22i30l10.14838.18637..20751...0.0..0.110.406.2j2......0....1..gws-wiz.......0i71.gNvA7Uodh7I ;;;
-
https://stackoverflow.com/questions/12438339/how-may-i-align-text-to-the-left-and-text-to-the-right-in-the-same-line
-
tags: align text left and right same line html - Google Search ;;;
---
<p style="text-align:left;">
This text is left aligned
<span style="float:right;">This text is right aligned</span>
</p>
-
can be modified to
-
<!--p style="text-align:left;"-->
This text is left aligned
<span style="float:right;">This text is right aligned</span>
<!--/p-->
---
align  text  left  and  right  same  line  html  -  Google  Search 
8 days ago by neerajsinghvns
embed pdf in html - Google Search
https://www.google.com/search?q=embed+pdf+in+html&oq=embed+pdf+in+html&aqs=chrome..69i57j69i60j69i61l2j0l2.4495j0j4&sourceid=chrome&ie=UTF-8 ;;;
https://www.youtube.com/watch?v=b5Vdy4_xWVU ;;;
-
03:00; location of html file
03:15; how to view something locally (via localhost) without uploading to justHost.
03:17; path written in address bar to display html file in browser.
---
tags: embed pdf in html - Google Search | howto ;;;
embed  pdf  in  html  -  Google  Search  |  howto  localhost 
4 weeks ago by neerajsinghvns
How to Embed PDF in HTML
https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html ;;;
tags: How to Embed PDF in HTML ;;;
---
How to Embed PDF in HTML
---
How to embed PDF viewer in HTML
-
If you don’t want users to download your PDF file just add #toolbar=0 after the URL of your PDF document.
---
How  to  Embed  PDF  viewer  in  HTML 
4 weeks ago by neerajsinghvns
CSS Expand / Collapse
https://codepen.io/mrmrp/pen/RPKYPW ;;; Original by Manas Ranjan Pradhan
tags: html CSS Expand / Collapse codePen ;;;
-
https://codepen.io/ngsshv/pen/WPWXaQ ;;; 20190220-1256pm; showMultipleLines.
https://codepen.io/ngsshv/pen/wNNpXy ;;; 20190219-1018am; grey shadow.
https://codepen.io/ngsshv/pen/WPPdJy ;;; 20190218-2352;;; orange shadow
https://codepen.io/ngsshv/pen/BMMJJm ;;; 20190218-2347;;;
html  CSS  Expand  /  Collapse  codePen  CanShowMultipleLinesInCollapsedState 
february 2019 by neerajsinghvns
W3Schools How TO - Code snippets for HTML, CSS and JavaScript
https://www.w3schools.com/howto/default.asp ;;;
tags: W3Schools How TO - Code snippets for HTML CSS and JavaScript HowTo needsEditing ;;;
W3Schools  How  TO  -  Code  snippets  for  HTML  CSS  and  JavaScript  HowTo  needsEditing 
december 2018 by neerajsinghvns
HTML button tag
-
<button type="button">Click Me!</button>
-
w3schools  css  html  button  clickable  needsEditing 
december 2018 by neerajsinghvns
CSS object-fit Property
https://www.w3schools.com/css/css3_object-fit.asp ;;;
-
tags: w3schools css html image needsEditing on resize resizing the aspect ratio of photo photograph is preserved and not destroyed ;;;
-
In the next example, we use object-fit: cover;, so when we resize the browser window, the aspect ratio of the images is preserved:
w3schools  css  html  image  needsEditing  on  resize  resizing  the  aspect  ratio  of  photo  photograph  is  preserved  and  not  destroyed 
december 2018 by neerajsinghvns
Tryit Editor v3.6
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
-
tags: w3schools css html sticky needsEditing heading stops scroll scrolling when it reaches the top of the screen ;;;
w3schools  css  html  sticky  needsEditing  heading  stops  scroll  scrolling  when  it  reaches  the  top  of  screen 
december 2018 by neerajsinghvns
CSS Backgrounds
https://www.w3schools.com/code/tryit.asp?filename=FXTHOEQAT1TO ;20181203-0025am
-
https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position ;;;
-
https://www.w3schools.com/css/css_background.asp ;;;
-
tags: w3schools CSS HTML needsEditing background all backgound-image image its position ;;;
-
Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:
-
w3schools  CSS  HTML  needsEditing  background  all  backgound-image  image  its  position  sampleCode 
december 2018 by neerajsinghvns
CSS Buttons
-
https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic
<a href="#" class="button">Link Button</a>
-
Shadow Buttons
https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover ;;;
-
https://www.w3schools.com/css/css3_buttons.asp
-
tags: w3schools css html button transition needsEditing clickable href hyperlink Link ;;;
-
Hoverable Buttons; transition duration.
w3schools  css  html  button  transition  needsEditing  clickable  href  hyperlink  Link 
december 2018 by neerajsinghvns
How To Create A Zebra Striped Table
https://www.w3schools.com/code/tryit.asp?filename=FXTGWWUIQ5AF ;20181202-2358 ;;;
https://www.w3schools.com/code/tryit.asp?filename=G363GJ644SJ3 ;;; 20190416-1507; similar to sample below; more choices;
https://www.w3schools.com/code/tryit.asp?filename=G359MPDVIMAI ;;; 20190415-2154; columns of different widths; cells or column merge in different rows; "colSpan"
https://www.w3schools.com/tags/att_td_colspan.asp ;;;
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro ;;; zebra
https://www.w3schools.com/howto/howto_css_table_zebra.asp ;zebra; text-align:left;;
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table ;;; can be used instead of tab tabs
https://www.w3schools.com/html/html_tables.asp ;;;
-
Columns heading are bold.
tags: w3schools css html zebra stripe striped table needsEditing no vertical line between columns alternate colors row shaded colspan col span mergeCell merge cell alternating and background be can Color gray instead of tab Tables tabs used white ;;;
w3schools  css  html  zebra  stripe  striped  table  needsEditing  no  vertical  line  between  columns  alternate  colors  row  shaded  colspan  col  span  mergeCell  merge  cell  alternating  and  background  be  can  Color  gray  instead  of  tab  Tables  tabs  used  white 
december 2018 by neerajsinghvns
How To Create a Read More Read Less Button
https://www.w3schools.com/howto/howto_js_read_more.asp ;;;
tags: w3schools css html readMore readLess read more less expand collapse needsEditing ;;;
w3schools  css  html  readMore  readLess  read  more  less  expand  collapse  needsEditing 
december 2018 by neerajsinghvns
How To Create a Hero Image
https://www.w3schools.com/code/tryit.asp?filename=FXTFHAX4OLCR ;20181202-2309 ;;;
https://www.w3schools.com/code/tryit.asp?filename=FXTF9NKOI096 ;20181202-2303 ;;;
https://www.w3schools.com/howto/howto_css_hero_image.asp ;;;
-
tags: w3schools css html landing page fullscreen or hero image and1 howto adjust location of text and clickAble button ;;;
w3schools  css  html  landing  page  fullscreen  or  hero  image  and1  howto  adjust  location  of  text  and  button  clickAble  sampleCode 
december 2018 by neerajsinghvns
CSS Multiple Backgrounds
https://www.w3schools.com/css/css3_backgrounds.asp
tags: w3schools CSS HTML landing page with full screen and1 multiple background image and2 button needsEditing ;;;
-
search for:
Hero Image
You could also use different background properties on a <div> to create a hero image (a large image with text), and place it where you want.
w3schools  CSS  HTML  landing  page  with  full  screen  and1  multiple  background  image  and2  button  needsEditing 
december 2018 by neerajsinghvns
CSS Image Gallery
https://www.w3schools.com/css/css_image_gallery.asp ;;;
tags; w3schools css html RWD responsive image images gallery for screens of different width i.e. laptop iPad iPhone needsEditing ;;;
w3schools  css  html  RWD  responsive  image  images  gallery  for  screens  of  different  width  i.e.  laptop  iPad  iPhone  needsEditing 
december 2018 by neerajsinghvns
HTML td valign Attribute
https://www.w3schools.com/tags/att_td_valign.asp ;;;
https://www.w3schools.com/tags/att_td_align.asp ;;;
-
tags: HTML td valign Attribute | w3schools html data alignment top in a cell ;;;
-
search for:
<td valign="top|middle|bottom|baseline">
HTML  td  valign  Attribute  |  w3schools  data  alignment  top  in  a  cell  LessonsLearnt  hindSight 
november 2018 by neerajsinghvns
Full Screen Landing Page Image with HTML & CSS [How-To] - YouTube
tags: Full Screen Landing Page Image with HTML & CSS [How-To] - YouTube | video website Like Tesla with multiple images on the home page ;;;
Full  Screen  Landing  Page  Image  with  HTML  &  CSS  [How-To]  -  YouTube  |  video  website  Like  Tesla  multiple  images  on  the  home 
november 2018 by neerajsinghvns
how to add background image in html - YouTube
https://www.youtube.com/watch?v=DGeYsNpl4_g ;;;
tags: how to add background image in html - YouTube | video body ;;;
-

00:55; body style = "background: url(https://image.freepik...) "
02:25; background-size: 100% 100%;
03:30; move background image inforamtion from <body></body> tag to <head></head> tag.
how  to  add  background  image  in  html  -  YouTube  |  video  body 
november 2018 by neerajsinghvns
Highlighting Text | Working with Text in HTML | Peachpit
http://www.peachpit.com/articles/article.aspx?p=2124990&seqNum=15 ;;;
-
searchFor
Since mark is new in HTML5, older browsers don’t render a background color by default. You can instruct them to do so by adding mark { background-color: yellow; } to your style sheet.
Highlighting  Text  |  Working  with  in  HTML  ||  Peachpit  |||  mark  needsEditing  css  Search  searchFor 
november 2018 by neerajsinghvns
Simple usage - JSFiddle
tags: Simple usage - JSFiddle | howto add comment comments from css ( not html ) on to the page display displayed web needsEditing ;;;
Simple  usage  -  JSFiddle  |  howto  add  comments  from  css  (  not  html  )  on  to  the  page  display  displayed  web  needsEditing  comment  code  sampleCode 
november 2018 by neerajsinghvns
10 Beautiful CSS Text Effects
https://cssnewbie.com/10-beautiful-css-text-effects/#.W-3l2zhKhhE ;;;
tags: 10 Beautiful CSS Text Effects | shadow fog HTML needsEditing codePen animated signature ;;;
10  Beautiful  CSS  Text  Effects  |  shadow  fog  HTML  needsEditing  codePen  animated  signature 
november 2018 by neerajsinghvns
HTML Tables
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table ;;; table width;;; Table Heading "bold" by default.
https://www.w3schools.com/html/html_tables.asp ;;;
https://www.w3schools.com/tags/att_td_colspan.asp ;;;
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table ;;; can be used instead of tab tabs
tags: HTML Tables w3schools alternating white and gray background Color colors table | can be used instead of tab tabs ;;;
HTML  Tables  w3schools  alternating  white  and  gray  background  Color  colors  table  |  can  be  used  instead  of  tab  tabs  colspan  col  span 
november 2018 by neerajsinghvns
HTML div tag
https://www.w3schools.com/tags/tag_div.asp ;;;
tags: w3schools HTML div tag HowTo add style inside div tag tags ;;;
w3schools  HTML  div  tag  HowTo  add  style  inside  tags  background-color  background  color 
november 2018 by neerajsinghvns
Cascading Drop-down Navigation Menu with CSS (Part 2) - YouTube
https://www.youtube.com/watch?v=T7ayE5AtRUA ;;;-
-
tags: HTML CSS cascading dropDown nav navigation menu youTube video by ralph needsEditing howTo create build convert hyperlink to button ;;;
-
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:15; refresh of what was done in Part 1.
01:05; horizontal layout / list; {float: left};
11:10; submenus disappear;
11:25; positioning of sub2;
12:00; move sub2 from below to right;
13:00; make sure that borders touch to ensure that menu items stay open.
16:10; give a visual indicator about which items have submenus;
HTML  CSS  cascading  dropDown  nav  navigation  menu  youTube  video  by  ralph  needsEditing  howTo  create  build  convert  hyperlink  to  button 
october 2018 by neerajsinghvns
YouTube; Cascading Drop-down Navigation Menu with CSS (Part 1)
https://m.youtube.com/watch?v=TmQm-p3wCSU ;;;
-
tags: dropDown menu youTube video by ralph needsEditing howTo create build HTML CSS cascading nav navigation howto instead of just the hyperlinks, the entire button becomes a hyperlink link ;;;
-
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
00:00; what is going on.
10:45; positioning of hyperlinks.
11:47; convert un-ordered list of hyperlinks to positioning them like a set of drop down menus.
displaying anchor tags; code> ul#navmenu a { }.
12:10; get rid of underline; {text decoration: none}
12:15; convert inline element anchor tags in to block elements. {display: block;}
12:25; make list items behave more like buttons. instead of just the hyperlinks, the entire button becomes a hyperlink.
12:50;
{display: block;
width: 125px;
height: 25px;
}
dropDown  menu  youTube  video  by  ralph  needsEditing  howTo  create  build  HTML  CSS  cascading  nav  navigation  instead  of  just  the  hyperlinks  entire  button  becomes  a  hyperlink  link 
october 2018 by neerajsinghvns
HTML Links
https://www.w3schools.com/html/html_links.asp ;;;
-
tags: w3schools HTML Links colors color behavior needsEditing and how the change changes in different situations link ;;;
---
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example
First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
w3schools  HTML  internal  Links  colors  color  behavior  needsEditing  and  how  the  change  changes  in  different  situations  link 
october 2018 by neerajsinghvns
<img height=""> »
https://html.com/attributes/img-height/
-
tags: html css img image height width why HowTo ;;;
---
Search = "annoying, glitchy page jump when the other elements on the page move to accommodate each image as it loads"
-
Why indicate the height?
Typically, with modern web design layout, you do not specify the height of an image or other element. The rendered, display height is a result of the width. (Hence the prevalent use of height: auto; in CSS layouts). For example, given an image with an intrinsic size of 200 px by 100 px (2:1 aspect ratio), if the rendered width is 150px, the rendered height will be 75%. Why does this matter? The browser doesn't know what the intrinsic size of an image is until it has downloaded and inspected it. So, until that happens, it doesn't know how much space to allot to it on page. Depending on the way the layout is structured, it can often (not always) figure out the width, but it won't be able to figure out the rendered height without information on the image's actual proportions. This causes an annoying, glitchy page jump when the other elements on the page move to accommodate each image as it loads. On a page with a lot of images, this can be a real problem. The simple solution is to include information about an image's height and width in the markup. You still need to specify the display size in the CSS, but providing information about the file will help browsers render the page faster and more accurately.

.img-full { max-width: 100%; height: auto; }
<img src="/wp-content/uploads/very-large-flamingo.jpg" width="1280" height="850">


Read more: https://html.com/attributes/img-height/#ixzz5UwrZRvPJ
html  css  img  image  height  width  why  HowTo 
october 2018 by neerajsinghvns
HTML pre tag
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
HTML  pre  tag  needsEditing 
october 2018 by neerajsinghvns
HTML hr tag
https://www.w3schools.com/tags/tag_hr.asp ;;;
tags: HTML hr tag horizontal Line needsEditing ;;;
-
Definition and Usage
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is used to separate content (or define a change) in an HTML page.
-
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
-
HTML  hr  tag  horizontal  Line  needsEditing 
october 2018 by neerajsinghvns
Horizontal Tabs
-
For example:

<p><b>noct<tab id=t1>ambulant</b> - walking at night<br>
<tab to=t1>(from Latin: <i>nox noctis</i> night + <i>ambulare</i> walk)
which is rendered as:

noctambulant - walking at night
(from Latin: nox noctis night + ambulare walk)
w3org  horizontal  tab  needsEditing  |  html 
october 2018 by neerajsinghvns
HTML Layouts
https://www.w3schools.com/html/html_layout.asp
-
tags: HTML Layouts layout | table frame grid ;;;
-
In “Float Layout”
Search for
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
HTML  Layouts  layout  table  frame  |  grid  float  clear  @media  media  queries 
october 2018 by neerajsinghvns
HTML Responsive Web Design
https://www.w3schools.com/html/html_responsive.asp ;;;
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_text ;;;
-
tags: HTML Responsive Web Design | font size ;;;
---
Responsive Text
Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
---
HTML  Responsive  Web  Design  |  font  size 
october 2018 by neerajsinghvns
Tryit Editor v3.5
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_letter-spacing ;;;
tags: CSS letter-spacing property | html font character letter horizontal spacing property w3schools sampleCode ;;;
https://www.w3schools.com/code/tryit.asp?filename=FWAIYPODA816 ;;;20181016-1222
CSS  letter-spacing  property  |  html  font  character  letter  horizontal  spacing  gap  w3schools  sampleCode 
october 2018 by neerajsinghvns
CSS letter-spacing property
CSS letter-spacing property | html font character letter horizontal spacing property w3schools ;;;
CSS  letter-spacing  property  |  html  font  character  letter  horizontal  spacing  w3schools 
october 2018 by neerajsinghvns
Tryit Editor v3.5
https://www.w3schools.com/css/tryit.asp?filename=trycss_line-height ;;;
tags: HTML w3schools line-height line height width thick thickness space spacing ;;;
-
HTML  w3schools  text  line-height  line  height  space  spacing  width  thick  thickness 
october 2018 by neerajsinghvns
Tryit Editor v3.5
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible ;;;
tags: w3schools html jq jquery collapsible expand collapse show hide with round rounded corner corners ;;;
w3schools  html  jq  jquery  collapsible  expand  collapse  show  hide  with  round  rounded  corner  corners  phoneBook 
december 2017 by neerajsinghvns
Tryit Editor v3.5
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_collapsible_nested ;;;
tags: w3schools html jq jquery nest nested collapsible block expand collapse show hide with round rounded corner corners ;;;
w3schools  html  jq  jquery  nest  nested  collapsible  block  expand  collapse  show  hide  with  round  rounded  corner  corners 
december 2017 by neerajsinghvns
Tryit Editor v3.5
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_collapsible_inset ;;;
tags: w3schools html jq jquery collapsible block expand collapse show hide with and without round rounded corner corners ;;;
w3schools  html  jq  jquery  collapsible  block  expand  collapse  show  hide  with  and  without  round  rounded  corner  corners 
december 2017 by neerajsinghvns
CSS Box Model
tags: CSS Box Model | w3schools margin margins padding paddings needsEditing ;;;
CSS  html  Box  Model  |  w3schools  margin  margins  padding  paddings  needsEditing 
december 2017 by neerajsinghvns
Super Simple Wiki Style Text Expand-Collapse with NO jQuery
http://dickervasti.com/wiki-style-text-expand-collapse-no-jquery.htm#01000;;;
tags: Super Simple Wiki Style Text Expand Collapse with NO jQuery | HTML ;;;
-
Use the following link to get "plus " & "minus" signs
https://unicode-table.com/en/#002B
Super  Simple  Wiki  Style  Text  Expand  Collapse  with  NO  jQuery  |  HTML  show  hide 
december 2017 by neerajsinghvns
How To Create a Full Page Image
https://www.w3schools.com/code/tryit.asp?filename=FXTFTL623MO3 ;20181202-2322;
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page ;;;
https://www.w3schools.com/howto/howto_css_full_page.asp;;;
search: How To Create a Full Height Image
-
tags: How To Create a Full Page Image | landing html css needsEditing questionable responsive page w3schools ;;;
How  To  Create  a  Full  Page  Image  |  landing  html  css  needsEditing  questionable  responsive  w3schools 
december 2017 by neerajsinghvns
(3) Full Screen Landing Page - Responsive HTML5/CSS3 Tutorial - YouTube
https://www.youtube.com/watch?v=Y5SHm53WFEk;;;
tags: Full Screen Landing Page - Responsive HTML5 / CSS3 Tutorial YouTube | video html css needsEditing questionable ;;;
-
Software used to create the *.html and *.css files
Sublime Text or Brackets.
-
responsive background image; desktop to smartphone.
-
01:25; software used;
- sublimeText
- Brackets
09:15; html file &
09:30; css file
20:40; text-transform: uppercase; /*change text to UPPER Case*/
20:50; text-decoration: none; /*link should not have an underline*/
23:55; responsive; @media...
Full  Screen  Landing  Page  -  Responsive  HTML5  /  CSS3  Tutorial  YouTube  |  video  html  css  needsEditing  questionable  background  image  home  homePage 
december 2017 by neerajsinghvns
How to create Dropdown Menu/Navigation Bar in Html and CSS (Hindi/Urdu) - YouTube
https://www.youtube.com/watch?v=ZK1l2f1QkrY;;;
tags: How to create Dropdown Menu / Navigation Bar in Html and CSS ( Hindi / Urdu ) - YouTube | video questionable needsEditing ;;;
(3)  How  to  create  Dropdown  Menu  /  Navigation  Bar  in  Html  and  CSS  (  Hindi  Urdu  )  -  YouTube  |  video  questionable  needsEditing  SampleCode 
december 2017 by neerajsinghvns
« earlier      
per page:    204080120160

Copy this bookmark:





to read